Feature: Layout - Add a class to stop columns from overlapping (UPDATE)

Abstract

While the negative margins (-0.75rem) set by .columns are a feature by design to align items, there are situations, when you don't want them, situations like doing layouts or work with non-transparent backgrounds. The screenshots show two of those issues. With a colourful background the columns overlap the previous and next block. At the right site of the browser window they cause unwanted space or even trigger a horizontal scroll bar.

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version [0.9.2"] Seen in:

Firefox
Chrome (Blink)
Safari (WebKit)

Steps to reproduce

<html>
<head>
  <link rel="stylesheet" href="./node_modules/bulma/css/bulma.css">
</head>
<body class="">
  <header class="hero has-background-primary">
    <div class="hero-body">
      <p class="title"> Hero title </p>
      <p class="subtitle"> Hero subtitle </p>
    </div>
  </header>
  <section class="has-background-grey">
    <div class="container is-max-desktop has-background-dark">
      <div class="columns">
        <div class="column has-background-dark has-text-light">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
          <div class="column has-background-light">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
          </div>
        </div>
      </section>
      <footer class="has-background-primary footer">
        <div class="content has-text-centered">
          <p>
            <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
            <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
            is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
          </p>
        </div>
      </footer>
    </body>
    </html>

Expected behaviour

It is easy to fix by combining .m-0 with .columns. That testet in all three browsers named above. Primary for the reason of documentation I suggest to add a named class to set the outer margins back to zero i.e. .has-padding-frame.

Actual behaviour

Always overlapping in all directions.

jgthms / bulma