Bulma overlapping items

Question

私はレイアウトのためにbulma.cssを使用していますが、何かに境界線を付けると重複が見つかりました。ここで

は重複です： '期待通り'

.shopのdiv要素はそう

しかし.basketのdivが少し忍び寄るしているようです。

Here is a link to a demo

と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; 
} 

？よく分かりません！

Answer 1

容器底部には理由ブルマコードでこの規則のトップコンテナの上に忍び寄る：

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

ちょうどそれを上書きします。あなたのコードにこれを追加します。

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

!importantは必要ではないかもしれません。私はあなたのルールが優先するように追加しました。