Bootstrap negative margin on rows : <p>Bootstrap rows has a <code>margin</code> (left and right) of <code>-15px</code>. </p>

<p>As far as I know this is mainly by two reasons:</p>

<ol>
<li>The <code>.container</code> has a <code>padding</code> (left and right) of <code>15px</code></li>
<li>The <code>col-*</code> have a gutter of <code>15px</code>. </li>
</ol>

<p>So in order to avoid the blank space created by the gutter on the first column (on its left side) and the space created by the gutter on the last column (on its right side) the row has a <code>margin</code> (left and right) of <code>-15px</code>. </p>

<p>I'm just wondering, why not to remove the <code>padding</code> of the container and just set the padding/margin of a row to 0?</p>

<p>It will produce the same effect, the first column will have <code>15px</code> of distance to the <code>.container</code>, and the same for the last column.</p>

<p>What I'm missing?</p>

<p>I've checked: <a href="https://stackoverflow.com/questions/47785921/negative-left-and-right-margin-of-row-class-in-bootstrap">Negative left and right margin of .row class in Bootstrap</a> and <a href="https://stackoverflow.com/questions/32657663/bootstraps-row-margin-left-15px-why-is-it-outdented-from-the-docs">Bootstrap&#39;s .row margin-left: -15px - why is it outdented (from the docs)</a> but I don't see any reason to use negative margins instead of 0 <code>padding</code>.</p>
