How to remove the gap between columns?
<p>I have this simple struture on BootStrap.</p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
     &lt;div class="col-md-4 blue-section" &gt;&lt;p&gt;Some content&lt;/p&gt;&lt;/div&gt;
     &lt;div class="col-md-4 red-section"&gt;&lt;p&gt;Some content&lt;/p&gt;&lt;/div&gt;
     &lt;div class="col-md-4 green-section"&gt;&lt;p&gt;Some Content&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The CSS custom file is:</p>

<pre><code>.container{ width:100%;}
.row{ background-color:#000;}

.blue-section{background-color:blue;}
.red-section{background-color:red;}
.green-section{background-color:green;}
</code></pre>

<p>When I resize the page and the columns stack on each other there is a gap between them and a space after the last with the same height of the previous gaps.
How can I remove those gaps? Is on the <code>.row</code>or is on the <code>.col-*-*</code>?
Thanks</p>