Bulma problem: overflow when using navbar in columns

In bulma, how to define width of navbar to be two-thirds (when on desktop)?

When i put it into columns div, it creates a problem on mobile: extra space is created on the right side due to burgers button overflow.

And below is the screenshot of what happens: if you take a look where the hero element ends on the right side, there is a small vertical space next to the ruler.

There is also a jsfiddle here, but unfortunately it is not visible in jsfiddle. To reproduce, take the following html, save it and open it in firefox, then use mobile inspector with ctrl+m.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body class="has-background-black">
    <div class="columns is-centered">
        <div class="column is-two-thirds">
            <nav class="navbar is-transparent" role="navigation" aria-label="main navigation">
              <div class="navbar-brand">
                <a class="navbar-item" href="Logo">
                  <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
                </a>

                <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
                  <span aria-hidden="true"></span>
                  <span aria-hidden="true"></span>
                  <span aria-hidden="true"></span>
                </a>
              </div>
              <div class="navbar-menu" id="navMenu">
                <div class="navbar-end">
                  <div class="navbar-item">
                    <div class="buttons">
                      <a class="button is-white" href="/posts">
                        Posts
                      </a>
                      <a class="button is-white" href="/tags">
                        Tags
                      </a>
                      <a class="button is-white" href="/about">
                        About
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </nav>
        </div>
    </div>
    
    <section class="hero has-background-dark">
        <div class="hero-body">
            <div class="columns is-centered">
                <div class="column is-two-thirds">
                    <p class="title has-text-white">
                        Title
                    </p>
                    <p class="subtitle has-text-white">
                        Description
                    </p>
                </div>
            </div>
        </div>
    </section>
    
    <script>
      document.addEventListener('DOMContentLoaded', () => {


        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);


        $navbarBurgers.forEach(el => {
          el.addEventListener('click', () => {


            const target = el.dataset.target;
            const $target = document.getElementById(target);


            el.classList.toggle('is-active');
            $target.classList.toggle('is-active');

          });
        });

      });

    </script>
  </body>
</html>

Solution

This is because columns class has negative margins. To fixed it you can add extra classes for columns and column.

index.html

<body class="has-background-black">
  <div class="columns nav-columns is-centered">
    <div class="column nav-column is-two-thirds">
      ...
    </div>
  </div>
</body>

style.css

.nav-columns {
  margin-inline: 0;
}
.nav-column {
  padding-inline: 0;
}