Bulma overlapping items - html

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

In it's latest version try is-gapless along with columns class

Answer 2

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.