html - CSS 内の要素で列が壊れる

Question

5 つの列に取り組んでいますが、内部の要素が壊れています。これを修正しようとしましたが、運がありません。

リンク: http://bit.ly/1NDAnQA

CSS:

.test-wrap {    
 -webkit-columns: 5;
 -moz-columns: 5;
 columns: ;
}

.test-wrap .img {
 display: block;
 margin: 0 0 0.75em;
}

HTML:

<div class="test-wrap">
 <div class="iefsv1"><img src="#" class="home-img"/>
  <h3><strong style="line-height: 2.50em;">1. Shop </strong></h3>
   Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum
   <br />
   <a class="buttonv3" href="#">Go to</a>
</div>
<div class="iefsarrowv1"><img src="#"/></div>
<div class="iefsarrowv1"><img src="#"/></div>
<div class="iefsv2"><img src="#" class="home-img"/>
 <h3><strong style="line-height: 2.50em;">2. Downpayment</strong></h3>
  Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum
  <br />
  <a class="buttonv3" href="#">Go to</a>
</div>
<div class="iefsarrowv2"><img src="#"/></div>
<div class="iefsv3"><img src="#" class="home-img"/>
 <h3><strong style="line-height: 2.50em;">3. Spread</strong></h3>
 Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum
 <br />
 <a class="buttonv3" href="#" target="_blank">Go to</a>
 </div>
</div>