title: How can I remove the outer gutter in 3 column grid from bootstrap 3
body: <p>See this fiddle.</p>
  
  <p><a href="http://jsfiddle.net/Nb5C7/" rel="nofollow">http://jsfiddle.net/Nb5C7/</a></p>
  
  <p>where is the blue gutter on the ends coming from( seems from auto margin) and how can I remove them?</p>
  
  <p>I can remove the gutter if I go fixed grid as in this example
  <a href="http://bootply.com/93548" rel="nofollow">http://bootply.com/93548</a></p>
  
  <p>but prefer not too</p>
  
  <p>The code from the fiddle</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="col-md-4" id="column1x"&gt;
  One
      &lt;/div&gt;
  
      &lt;div class="col-md-4" id="column2x"&gt;
  Two
      &lt;/div&gt;
  
      &lt;div class="col-md-4" id="column3x"&gt;
      Three
  
      &lt;/div&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>     .container, .container-fixed { 
  background: #34c6f3;
   }
  
  #column1x, #column2x, #column3x {
  -width : 32%;
  height: 620px;
  margin-right: 0px;
  background: #ed1e6c;
  border: 1px solid #222;
  }   
  
  #column1x, #column2x {
  -margin-right: 2%;
  }
  </code></pre>