grid cells sometimes overlap, sometimes overflow on the right hand side of the screen

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version [1.0.1] I tested with Firefox and Edge but I am still unsure this is an "expected" behavior.

Description

Using a basic grid, at different browser width to test the responsiveness of my screen, grid cells sometimes overlap, sometimes overflow on the right hand side of the screen

Steps to Reproduce

1 - Using this piece of HTML

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.1/css/bulma.min.css">
</head>
<body>
<div class="container mb-5">
   <div class="grid mx-3">
      <div class="cell has-text-centered">
        <a class="button " href="/members/71/"><strong>Médéric Bailet</strong></a>
      </div>
      <div class="cell has-text-centered">
        <a class="button is-primary" href="/members/13/"><strong>Aymeric  Bailet-Séraline</strong></a>
      </div>
      <div class="cell has-text-centered">
        <a class="button is-link" href="/members/10/"><strong>Anthony Bois</strong></a>
      </div>
      <div class="cell has-text-centered">
        <a class="button " href="/members/102/"><strong>Véronique Bois</strong></a>
      </div>
      <div class="cell has-text-centered">
        <a class="button is-primary" href="/members/2/"><strong>Aelys Boucherle</strong></a>
      </div>
      <div class="cell has-text-centered">
        <a class="button is-link" href="/members/24/"><strong>Elyas Boucherle</strong></a>
      </div>
      <div class="cell has-text-centered">
        <a class="button " href="/members/77/"><strong>Natys Boucherle</strong></a>
      </div>
      <div class="cell has-text-centered">
        <a class="button is-primary" href="/members/98/"><strong>Terence Boucherle</strong></a>
      </div>
      <div class="cell has-text-centered">
        <a class="button is-link" href="/members/42/"><strong>Jérome Buchet</strong></a>
      </div>
      <div class="cell has-text-centered">
        <a class="button " href="/members/108/"><strong>Zyade Charlot-Levillain</strong></a>
      </div>
  </div>
</div>
</body>

With Firefox width=350, I get: (Edge 350 provides a better rendering)

Width Edge width=500, I get With Firefox width=500, more or less the same:

Expected behavior

No overlap and no overflow, mx-3 respected on the right side.

jgthms / bulma