Elements overflowing in grid

Hopefully this is the right place to post this question, if not, sorry! I can’t figure out why my content elements are overflowing outside the grid. I read through the roots wrapper and roots 101 and still can’t figure out why my grid isn’t lining. Here is some code

This is at the bottom of my front-page.php

<div class="container"> <!-- Container in front-page.php -->
 <div class="col-lg-12">
 
 
     <?php
$args = array(
    'post_type' => 'post',
    'post_per_page' => 10
  );
?>

<?php
$the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>

<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

<?php get_template_part('templates/content', ( 'recipe' == get_post_type() ? 'recipe' : get_post_format() )); ?>

<?php endwhile; ?>

<?php wp_reset_postdata(); ?>

<?php else:  ?>
  <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>


And then I'm calling different posts in different content.php pages (content-gallery.php, content-quote.php, etc..). Here is the code in content-quote.php:



 <section class="m-blog-box m-quote-box col-lg-3 col-md-6 col-sm-12 <?php filter_post() ?>">
<article <?php post_class(); ?>>

  <div class="entry-summary">
    <?php the_excerpt(); ?>
    <h5>-- <?php echo get_post_meta($post->ID, '_format_quote_source_name', true); ?></h5>
  </div>

</article>
  <header>
    <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?//php the_title(); ?></a></h2>
    <?//php get_template_part('templates/entry-meta'); ?>
  </header>
   <section class="m-box-info-bar">
      <a href="#" class="dashicons dashicons-format-quote"></a>
      <a href="#" title="" class="m-infobox-time"><?php the_time('F j') ?></a>
      <a href="#" title="" class="m-infobox-time"><?php the_time('Y') ?></a>
      <a href="#" class="dashicons dashicons-format-chat"></a>
      <a href="#" class="dashicons dashicons-share-alt2"></a>
      </section>
      </header>
   </section>
</section>

I’m trying to get 3 columns to go across but they aren’t centered. When I offset them, a the overflow on the right increases.

https://www.dropbox.com/s/k3zu6p5v320of7d/Screenshot%202014-08-05%2015.36.37.png (not centering)

here is my css for the boxes

 .m-blog-box {
  border: 1px solid #d5d5d5;
  position: relative;
  // width: 20em;
  margin: 1em 1em 0em 1em;
  padding: 0;
@media (max-width: 480px) {
      max-width: 100%;
      width: 20em;
    }
}

I commented out the width because I thought it might be better for the columns to define the width of the box. Any help in the right direction is highly appreciated. Let me know if I need to put more info in there! Thanks.

Reference http://getbootstrap.com/css/#grid for proper markup - looks like you’re missing the row. Also, please ask Bootstrap questions elsewhere.

Thanks for the info. I have a pretty solid understanding of the grid. I don’t think I’m completely getting the structure of roots. The code in the base.php is throwing me off because the

 <div class="wrap container" role="document">
    <div class="content row">

is creating an extra element around my content and overflowing it. I don’t know if the bootstrap community is going to understand my roots questions :(. Sry.

Then remove it? Change the markup to whatever you need it to be

Alright. Thanks for the help. I appreciate the quick response.