Bulma overlapping items

Question

I'm using bulma.css for a layout, but when I give a border to something I've found its overlapping.

Here is the overlap:

The .shop div seems 'as expected'

But the .basket div seems to be creeping up a bit.

Here is a link to a demo

And Html:

<div id="app">
  <div class="container">
    <div class="shop">
      <div class="columns">
        <div class="column is-one-quarter product">
          <h3 class="title is-4">Cat</h3>
          <p>
            £<span>2.99</span></p>
          <div><button class="button">Add to basket</button></div>
        </div>
        <div class="column is-one-quarter product">
          <h3 class="title is-4">Dog</h3>
          <p>
            £<span>4.00</span></p>
          <div><button class="button">Add to basket</button></div>
        </div>
      </div>
    </div>
    <div class="basket">
      <h1>Basket</h1>
      <table class="table">
        <thead>
          <tr>
            <td>Item</td>
            <td>Quantity</td>
            <td>Price</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="3">No items in the basket</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

CSS:

// All of bulma.css
html,body{
  height:100%;
  padding:20px;
}

.product{
  box-sizing:border-box;
  border:2px solid #eaeaea;
  padding:20px;
}

I think its something to do with ... flexbox? I'm not sure!

Answer 1

The bottom container is creeping up over the top container because of this rule in the Bulma code:

.columns:last-child {
    margin-bottom: -.75rem;
}

Just override it. Add this to your code:

.columns:last-child {
    margin-bottom: 0 !important;
}

!important may not be necessary. I just added it to ensure that your rule prevails.