Bootstrap3 - Columns Touching

Question

I am trying to make a WordPress theme using bootstrap (i know not many people like this) and I am having a problem with building my grids up. The margin top is perfect, 10px. but the margin on the sides is incorrect and if I try to change it in CSS it drops onto a new row. I am using 2 divs:

<div class="container">
    <div class="row">
        <div class="col-sm-8"><!--CONTENT--></div>
        <div class="col-sm-4"><!--CONTENT--></div>
    </div>
</div>

Lets say these 2 col-sm divs where block colours of blue. They are touching in the middle where i want them to have a 10px spacing. The Code Below is not what happens it is a visual representation, so don't try and fix that code ;).

Edit

I have now applied the below and my site looks like this, it is nearer but still not 100% now it looks like this (the colours dont bother me its the sizes):

ScreenShot

style.css

.even_space > div > div {
    box-shadow: 0px 0px 5px grey;
    border-left: 3px dashed grey;
}
.even_space > div {
    padding:0 10px;
}
.even_space > div:first-child {
        padding-right:0;
}

.main-posts{
    margin-top: 10px;
}

#sidebar{
    margin-top: 10px;
}

Index.php

<div id="main">
    <div class="row even_space">
        <div class="col-sm-8 main-posts">
            <div>
                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <h1><?php the_title(); ?></h1>
                <h4>Posted on <?php the_time('F jS, Y') ?></h4>
                <p><?php the_content(__('(more...)')); ?></p>
                <P><p><?php the_author_posts_link(); ?> on <?php the_time('F jS, Y'); ?>  in <?php the_category(', '); ?> <?php edit_post_link(__('{Edit}'), ''); ?></p></P>
                <hr> <?php endwhile; else: ?>
                <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
            </div>
        </div>
        <?php get_sidebar(); ?>
    </div>

sidebar.php

<div class="col-sm-4" id="sidebar">
    <div>
        <h2 ><?php _e('Categories'); ?></h2>
        <ul >
            <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
        </ul>
        <h2 ><?php _e('Archives'); ?></h2>
        <ul >
            <?php wp_get_archives('type=monthly'); ?>
        </ul>
        <h2><?php _e('Meta'); ?></h2>
        <ul>
            <li><?php wp_loginout(); ?></li>    
        </ul>
    </div>
</div>

Answer 1

The way you can do this using Bootstrap is use a nested container:

<div class="container">
    <div class="row">
        <div class="col-sm-8"><div><!--CONTENT--></div></div>
        <div class="col-sm-4"><div><!--CONTENT--></div></div>
    </div>
</div>

And to manage the space you can handle the padding of the col elements wich is for default 15px at each side.

Check this BootplyDemo.