<p dir="auto">I know there are a lot of threads out there but I cannot found an "official" solution to this question.</p>
<p dir="auto">What is the best way of removing the padding between the columns, and the container?</p>
<p dir="auto">Sorry if the question already have an answer.</p>
<p dir="auto">I have tried to make my layout <strong>100%</strong>. And for that I didn't use any <code class="notranslate">&lt;div class ="container"&gt;</code>. Just started with <code class="notranslate">&lt;div class ="row"&gt;</code>.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-3&quot;&gt;
        &lt;div class=&quot;sectionLeft&quot;&gt;
            Sidebar Content
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-9&quot;&gt;
        Test content
    &lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">row</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">col-md-3</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">sectionLeft</span>"<span class="pl-kos">&gt;</span>
            Sidebar Content
        <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">col-md-9</span>"<span class="pl-kos">&gt;</span>
        Test content
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">but it showing <strong>horizontal scroll bar</strong>. I don't know why. But I saw that it may cause from <code class="notranslate">margin-left</code> and <code class="notranslate">margin-right</code> negative value.<br>
But I am using Bootstrap v3.0.0 it should be fixed.</p>
<p dir="auto">Please see my full code from <a href="http://bootply.com/81888" rel="nofollow">http://bootply.com/81888</a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/5d9c94e3dc891dfa866a1901863f1e50e2276d747796b42d4d1d7257770cdb25/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f313039353030382f313137313037302f30353136666662362d323066622d313165332d383965312d3461396164353535366237622e6a7067"><img src="https://camo.githubusercontent.com/5d9c94e3dc891dfa866a1901863f1e50e2276d747796b42d4d1d7257770cdb25/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f313039353030382f313137313037302f30353136666662362d323066622d313165332d383965312d3461396164353535366237622e6a7067" alt="screenshot" data-canonical-src="https://f.cloud.github.com/assets/1095008/1171070/0516ffb6-20fb-11e3-89e1-4a9ad5556b7b.jpg" style="max-width: 100%;"></a></p>