New region shows up weird

Question

If you visit http://balancesocialmedia.com/, under the carousel, there are 4 boxes of content; they are block views with col-md-3 as CSS class.

The new region I created is called content_bottom.

regions[content_bottom] = 'Content Bottom'

I then put this code in the page--front.tpl.php under content region (near the bottom of this snippet).

  <section<?php print $content_column_class; ?>>
  <?php if (!empty($page['highlighted'])): ?>
    <div class="highlighted jumbotron"><?php print render($page['highlighted']); ?></div>
  <?php endif; ?>
  <?php if (!empty($breadcrumb)): print $breadcrumb; endif;?>
  <a id="main-content"></a>
  <?php print render($title_prefix); ?>
  <?php print render($title_suffix); ?>
  <?php print $messages; ?>
  <?php if (!empty($tabs)): ?>
    <?php print render($tabs); ?>
  <?php endif; ?>
  <?php if (!empty($page['help'])): ?>
    <?php print render($page['help']); ?>
  <?php endif; ?>
  <?php if (!empty($action_links)): ?>
    <ul class="action-links"><?php print render($action_links); ?></ul>
  <?php endif; ?>
  <?php print render($page['content']); ?>
  <div class="container">
  <div class="row">
   <?php if ($page['content_bottom']): ?>

    <?php print render($page['content_bottom']); ?>
    </div></div>
   <!-- /.section, /#content bottom -->
<?php endif; ?>
</section>

I tried moving the code under the closing section tag, removing the container and row class but the first block view is always renders a bit funny.

Also, I can move the blocks to the content region and shows up as expected. I can't track down what's different between the two regions.

Does anyone see where I'm messing up?

Answer 1

You seem to have CSS that removes the top margin from the first block:

.block:first-child h2.block-title, .page-header {
   margin-top: 0;
}

You can override this by simply adding this piece of CSS in your CSS file:

.region-content-bottom .block h2.block-title {
  margin-top: 21px;
}