title: Bootstrap: Remove column margin
body: <p>I have a three-column layout and I need to remove the margin from the left and right.</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;h1&gt;Hello World!&lt;/h1&gt;
    &lt;p&gt;Resize the browser window to see the effect.&lt;/p&gt;
    &lt;div class="row row-no-padding"&gt;
      &lt;div class="col-sm-4" style="background-color:lavender;"&gt;.col-sm-4&lt;/div&gt;
      &lt;div class="col-sm-4" style="background-color:lavenderblush;"&gt;.col-sm-4&lt;/div&gt;
      &lt;div class="col-sm-4" style="background-color:lavender;"&gt;.col-sm-4&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried </p>
  
  <pre><code>.row-no-padding {
     margin-left: 0;
     margin-right: 0;
  }
  </code></pre>
  
  <p>with no result...
  <a href="https://jsfiddle.net/4k3xdfd7/1/" rel="nofollow">fiddle</a></p>
  
  <p>EDIT: I need to keep the <code>class="container"</code> intact.</p>
  
  <p>So, what I need:
  <a href="https://i.stack.imgur.com/WeIhJ.png" rel="nofollow"><img src="https://i.stack.imgur.com/WeIhJ.png" alt="enter image description here"></a>
  and what I have now:
  <a href="https://i.stack.imgur.com/wguyZ.png" rel="nofollow"><img src="https://i.stack.imgur.com/wguyZ.png" alt="enter image description here"></a></p>
  
  <p>EDIT:
  So, based on what Ricky_Ruiz said about <code>.container</code> properties: 
  I wanted in 100% browser window to make margin-left and margin-right equal zero. Say, my screen resolution is 1300, so I just needed to include this in <code>.css</code> file:</p>
  
  <pre><code>@media (min-width: 1300px) {
    .container {
      width: 1300px;
    }
  }
  </code></pre>