Twitter Bootstrap 3 : margins in row - twitter-bootstrap-3

Question

I'm starting with Bootstrap 3 and I have already some problems. Let me explain why.
Below my goal (photoshop draft for 970px container, 30px gutter, 80px columns) :
To code this template with bootstrap 3, I have defined this code :
<div class="row">
<!-- LEFT COLUMN -->
<div class="col-md-6" id="colonne_gauche">
<section class="col-md-12">
<div class="row">
<!-- FAVORIS 1 -->
<article class="col-md-6" id="div-favorite-1">
<h2>Favoris 1</h2>
</article>
<!-- FAVORIS 2 -->
<article class="col-md-6" id="div-favorite-2">
<h2>Favoris 2</h2>
</article>
</div>
</section>
</div>
<!-- RIGHT COLUMN -->
<div class="col-md-6" id="colonne_droite">
<section class="col-md-12">
<div class="row">
<!-- FAVORIS 3 -->
<article id="div-favorite-3">
<h2>Favoris 3</h2>
</article>
</div>
</section>
</div>
</div>
Which gives me this result :
I have defined colors to have a look on blocks :
Green : left column
Gold : right column
AS you can see there is no margin between "Favoris 1" & "Favoris 2". These 2 blocks takes full width without padding and margin.
If you have a look on my draft, you can see that normally it should have a standard margin between these two blocks egual to standard space between two columns, so in my case 30px.
I tried to define for each of them (Favoris 1 : margin-right:15px and Favoris 2 : margin-left:15px) but the width of these blocks are not updated in function of this margin definition.
My goal is to obtain this result, of course without to have defined in the CSS file the width of these blocks :
So I'm looking for your help to find a way to solve this problem.
Thanks a lot for your feedbacks.

Answer 1

Do it like this. See the snippet in full page. Columns should not be child elements of col-*-*. Columns should always be in .row.
<div class="row">
<!-- LEFT COLUMN -->
<div class="col-md-6" id="colonne_gauche">
<div class="row">
<!-- FAVORIS 1 -->
<section class="col-md-6">
<article id="div-favorite-1">
<h2>Favoris 1</h2>
</article>
</section>
<!-- FAVORIS 2 -->
<section class="col-md-6">
<article id="div-favorite-2">
<h2>Favoris 2</h2>
</article>
</section>
</div>
<div class="row">
<!-- ACTUALITE 2 -->
<section class="col-md-12">
<article id="div-actualite-1">
<h2>Actualite 1</h2>
</article>
</section>
</div>
</div>
<!-- RIGHT COLUMN -->
<div class="col-md-6" id="colonne_droite">
<div class="row">
<!-- FAVORIS 3 -->
<section class="col-md-12">
<article id="div-favorite-3">
<h2>Favoris 3</h2>
</article>
</section>
</div>
</div>
</div>
#colonne_gauche {
background-color: green;
}
#colonne_droite {
background-color: yellow;
}
#div-favorite-1,
#div-favorite-2,
#div-favorite-3,
#div-actualite-1 {
color: #fff;
min-height: 200px;
}
#div-favorite-1 {
background-color: blue;
}
#div-favorite-2 {
background-color: orange;
}
#div-favorite-3 {
background-color: red;
}
#div-actualite-1 {
background-color: purple;
}
h2 {
padding: 0;
margin: 0;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<!-- LEFT COLUMN -->
<div class="col-md-6" id="colonne_gauche">
<div class="row">
<!-- FAVORIS 1 -->
<section class="col-md-6">
<article id="div-favorite-1">
<h2>Favoris 1</h2>
</article>
</section>
<!-- FAVORIS 2 -->
<section class="col-md-6">
<article id="div-favorite-2">
<h2>Favoris 2</h2>
</article>
</section>
</div>
<div class="row">
<!-- ACTUALITE 2 -->
<section class="col-md-12">
<article id="div-actualite-1">
<h2>Actualite 1</h2>
</article>
</section>
</div>
</div>
<!-- RIGHT COLUMN -->
<div class="col-md-6" id="colonne_droite">
<div class="row">
<!-- FAVORIS 3 -->
<section class="col-md-12">
<article id="div-favorite-3">
<h2>Favoris 3</h2>
</article>
</section>
</div>
</div>
</div>