title: Zurb Foundation 5 - Row padding/margin
body: <p>I am trying to create a background color for my row, yet when I set a background color it extends over the regular width of my columns. 
  Then I tried making the row smaller with padding, which works, but makes the columns smaller. 
  I need to somehow remove the pink area, keep only the red background, AND keep the columns even.</p>
  
  <p>Any ideas?</p>
  
  <p><img src="https://i.stack.imgur.com/ZcNuJ.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;!-- When applying the padding, the columns background turns OK. However, the
  columns themselves aren't as even as "normal" columns without padding --&gt;
  
  &lt;div class="row" style="background-color: pink; padding-right: 15px; padding-left: 15px; "&gt;
          &lt;div class="large-3 columns" style="background-color: red;"&gt;
          text1
          &lt;/div&gt;
          &lt;div class="large-3 columns" style="background-color: red;"&gt;
          text2
          &lt;/div&gt;
           &lt;div class="large-3 columns" style="background-color: red;"&gt;
          text3
          &lt;/div&gt;
          &lt;div class="large-3 columns" style="background-color: red;"&gt;
          text4
          &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- The background of the columns is same for all of the columns, and it's 
  bigger than the image because of the padding --&gt;
  &lt;div class="row"&gt;
      &lt;div class="large-3 columns" style="background-color: teal;"&gt;
          text1
      &lt;/div&gt;
          &lt;div class="large-3 columns" style="background-color: teal;"&gt;
          text2
      &lt;/div&gt;
           &lt;div class="large-3 columns" style="background-color: teal;"&gt;
          text3
      &lt;/div&gt;
          &lt;div class="large-3 columns" style="background-color: teal;"&gt;
          text4
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- This image has a padding in the column, so it's not the whole width of 
  the row --&gt;
  &lt;div class="row"&gt;
      &lt;div class="large-12 columns" style="background-color: grey;"&gt;
          &lt;img alt="slide image" src="http://placehold.it/1000x15"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>