Zurb Foundation 5 - Ligne padding/margin

Je suis en train de créer une couleur de fond pour ma ligne, mais lorsque j'ai mis une couleur d'arrière-plan, il s'étend sur la largeur normale de mes colonnes.
Alors j'ai essayé de faire la ligne de plus petites avec un rembourrage, qui fonctionne, mais rend les colonnes plus petites.
J'ai besoin de quelque sorte de supprimer la zone rose, de ne garder que le fond rouge, ET de garder les colonnes de même.

Des idées?

<!-- When applying the padding, the columns background turns OK. However, the
columns themselves aren't as even as "normal" columns without padding -->

<div class="row" style="background-color: pink; padding-right: 15px; padding-left: 15px; ">
        <div class="large-3 columns" style="background-color: red;">
        text1
        </div>
        <div class="large-3 columns" style="background-color: red;">
        text2
        </div>
         <div class="large-3 columns" style="background-color: red;">
        text3
        </div>
        <div class="large-3 columns" style="background-color: red;">
        text4
        </div>
</div>

<!-- The background of the columns is same for all of the columns, and it's 
bigger than the image because of the padding -->
<div class="row">
    <div class="large-3 columns" style="background-color: teal;">
        text1
    </div>
        <div class="large-3 columns" style="background-color: teal;">
        text2
    </div>
         <div class="large-3 columns" style="background-color: teal;">
        text3
    </div>
        <div class="large-3 columns" style="background-color: teal;">
        text4
    </div>
</div>
<!-- This image has a padding in the column, so it's not the whole width of 
the row -->
<div class="row">
    <div class="large-12 columns" style="background-color: grey;">
        <img alt="slide image" src="http://placehold.it/1000x15">
    </div>
</div>

OriginalL'auteur Yossi | 2014-06-27