Bulma: Last Box in same Level is lower than the other boxes

[m1771vw]

This is about Bulma.
This is a bug.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.7.1]
My browser is: Chrome64
I am sure this issue is not a duplicate

Description

When using box with level, the last item is slightly lower than the rest of them.

Codepen with example:
https://codepen.io/anon/pen/XPjMzZ

If you add another box, the last box will still be slightly lowered than the others.

Unsure if there is supposed to be another wrapper class that is supposed to be used with box and level, or if they are not supposed to be used together.

Expected behavior

When using level, all the boxes in the level should be aligned.

Actual behavior

When using level, the last box is slightly lower than the rest of them as demonstrated in the screenshot below.

[emkajeej]

This is because all but the last box have a margin-bottom. Either override the box margin when used in level, or use the level-item wrappers.
level-item's distribute their widths evenly and center their content, so to get your specific layout you'd need to make use of the level-left and level-right classes, either as a helper or as a wrapper:

<div class="level">
  <div class="level-item level-left">
    <div class="box">
      <h1>Flashcard 1</h1>
    </div>
  </div>

  <div class="level-item">
    <div class="box">
      <h1>Flashcard 2</h1>
    </div>
  </div>

  <div class="level-item level-right">
    <div class="box">
      <h1>Flashcard 3</h1>
    </div>
  </div>
</div>

[m1771vw]

@emkajeej can you explain why I need to nest level-item in a level-item at the end? Or is that just how Bulma works?

[emkajeej]

You don't, that was an error on my end.
Updated my comment :)

[bebosudo]

Hi, I faced this issue as well when dealing with boxes inside columns.
Through firefox dev tools I found the following rule:
.block:not(:last-child), .box:not(:last-child), .breadcrumb:not(:last-child), .content:not(:last-child), .highlight:not(:last-child), .level:not(:last-child), .message:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .subtitle:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .tabs:not(:last-child), .title:not(:last-child) { margin-bottom: 1.5rem; }

I believe it should be quite easy for the user to add a class on the elements that need some space; I propose to remove this rule.

[Kacperhehe]

It's so stopid :(
I coding with Bulma 2 days and i need edit the .css file 2 times...