Bulma: No padding between level-item when expanded past 780px

I have this html

<body aurelia-app="main">


  <section class="section is-small">
    <nav-bar class="au-target" au-target-id="5">
  <div class="container">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item au-target" route-href="route: home" au-target-id="1" href="#/">
          <span class="icon is-medium">
            <i class="fas fa-lg fa-home" aria-hidden="true"></i>
          </span>
        </a>
        <a role="button" click.delegate="burgerClicked()" aria-label="menu" aria-expanded="false" data-target="myNavBar" class="au-target navbar-burger burger" au-target-id="2">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="myNavBar" class="au-target navbar-menu" au-target-id="3">
        <div class="navbar-start">
          <div class="navbar-item">
            <a route-href="route: games" class="au-target" au-target-id="4" href="#/games">My Games</a>
          </div>
        </div>
      </div>
    </nav>
  </div>
</nav-bar>
    <router-view name="main" class="container au-target" au-target-id="6">


  <available-games games.bind="games" class="au-target" au-target-id="11" bindable="games">

  <div class="columns">
    <ul class="column level">
      <li class="level-item">
        <game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
  <button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
    Warhammer 40k
  </button>
</game-button>
      </li><li class="level-item">
        <game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
  <button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
    Age of Sigmar
  </button>
</game-button>
      </li><!--anchor-->
    </ul>
  </div>
</available-games>
</router-view>
  </section>
</body>

it looks fine, until I expand it all the way, and then there is no space (height wise) between the full width buttons. I presume, I'm misunderstanding something about how I should be using bulma.

good bad

note: this is the extent of my scss

@import "~bulma";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";

Solution

First off, a tip: fix formatting a bit to make it more consistent to readers - more clarity to the HTML hierarchy.

Possible steps:

1) It looks like you might need some padding between each <button> element inside some <style> tags or in your scss file that target the specific class attribute/element you need.

2) I'm confused about your <game-button> element. Is it a custom element you created? If it's not, see the MDN Web Docs for examples of how to create custom HMTL elements if you need it.

3) If <game-button> is not a custom element you created, see Bulma's documentation for buttons because Bulma only requires a <button> element to work (and spacing wouldn't be an issue).

4) Check out this GitHub post regarding spacing between buttons. Although their implementation is different, you may still need to wrap your buttons in a <div class="buttons"></div> element. If there are issues after with inconsistent vertical alignment, I'd suggest using CSS display: flex;, align-items: center, and justify-content: center for centered alignment.