title: Adding left and right margin to elements in bootstrap row
body: <p>Im a little confused why bootstrap wont apply left and right margins to the columns, all i want is a simple row with 3 columns that have like 20px horizontal margin in between each other. If try to do that bootstrap simply clips one of the divs to the next line.</p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="container"&gt;
  
    &lt;div class="row"&gt;
  
      &lt;div class="col-md-4"&gt;&lt;p&gt;Box 1&lt;/p&gt;&lt;/div&gt;
      &lt;div class="col-md-4"&gt;&lt;p&gt;Box 1&lt;/p&gt;&lt;/div&gt;
      &lt;div class="col-md-4"&gt;&lt;p&gt;Box 1&lt;/p&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.col-md-4 {
    background-color: tomato;
    margin: 20px 5px;
  }
  </code></pre>