Strange Alignment Issue with CSS Table Cells and Bootstrap

Question

We are having an issue where the last row for some reason has a ton of unexplainable padding. I've spent two hours trying to figure this one out. If its something easy I'm sorry.

https://www.harpercollege.edu/maker/dev-index.php

<div class="circle-box-table-container">
<div id="circle-box-7" class="col-xs-12 col-sm-12 col-md-4 circle-box-alt-box">
<div class="box">
<div class="circle-box-content-containter">
<div class="circle-box-content-heading">Youth STEAM Class&nbsp;</div>
<div class="circle-box-content-text"><a href="{{f:2323900}}"><img class="pull-left" style="margin-bottom: 5px; margin-right: 5px;" title="Youth STEAM Class" src="{{f:28913025}}" alt="Building Model" width="90" height="94" /></a><em><strong>The new "shop class"</strong></em><br />We are bringing back shop classes for kids. We&rsquo;ll teach 21st century skills in a hands-on, fun and engaging environment.</div>
</div>
</div>
</div>
<div id="circle-box-8" class="col-xs-12 col-sm-12 col-md-8 circle-box-alt-box-wide">
<div class="box">
<div class="circle-box-content-containter"><img class="" src="{{f:28930375}}" alt="Maker-Space-Banner" width="100%" /></div>
</div>
</div>
</div>

Answer 1

Use vertical-align: top on the last box. Browsers give table cells padding automatically to remain evenly sized with the rest of the content.