<p dir="auto">When I use component , given the following code it adds the below  css rules</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".MuiGrid-spacing-xs-16 {
    width: calc(100% + 16px);
    margin: -8px;
} "><pre class="notranslate"><span class="pl-kos">.</span><span class="pl-v">MuiGrid</span><span class="pl-c1">-</span><span class="pl-s1">spacing</span><span class="pl-c1">-</span><span class="pl-s1">xs</span><span class="pl-c1">-</span><span class="pl-c1">16</span> <span class="pl-kos">{</span>
    <span class="pl-c1">width</span>: <span class="pl-en">calc</span><span class="pl-kos">(</span><span class="pl-c1">100</span><span class="pl-c1">%</span> <span class="pl-c1">+</span> <span class="pl-c1">16</span><span class="pl-s1">px</span><span class="pl-kos">)</span><span class="pl-kos"></span><span class="pl-kos">;</span>
    margin: <span class="pl-c1">-</span><span class="pl-c1">8</span><span class="pl-s1">px</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span> </pre></div>
<p dir="auto">My code</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Grid container direction={'row'} justify={'space-between'} align={'flex-start'}&gt;
        &lt;Grid&gt;
          &lt;OfferPreview /&gt;
        &lt;/Grid&gt;
        &lt;Grid&gt;
          &lt;OfferPreview /&gt;
        &lt;/Grid&gt;
&lt;/Grid&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">container</span> <span class="pl-c1">direction</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s">'row'</span><span class="pl-kos">}</span> <span class="pl-c1">justify</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s">'space-between'</span><span class="pl-kos">}</span> <span class="pl-c1">align</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s">'flex-start'</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">OfferPreview</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">OfferPreview</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">The result is that the container overlaping. Because the margin -8px affect also top and bottom.</p>
<p dir="auto">The fix could be...</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".MuiGrid-spacing-xs-16 {
    width: calc(100% + 16px);
    margin: 0 -8px;
} "><pre class="notranslate"><span class="pl-kos">.</span><span class="pl-v">MuiGrid</span><span class="pl-c1">-</span><span class="pl-s1">spacing</span><span class="pl-c1">-</span><span class="pl-s1">xs</span><span class="pl-c1">-</span><span class="pl-c1">16</span> <span class="pl-kos">{</span>
    <span class="pl-c1">width</span>: <span class="pl-en">calc</span><span class="pl-kos">(</span><span class="pl-c1">100</span><span class="pl-c1">%</span> <span class="pl-c1">+</span> <span class="pl-c1">16</span><span class="pl-s1">px</span><span class="pl-kos">)</span><span class="pl-kos"></span><span class="pl-kos">;</span>
    margin: <span class="pl-c1">0</span> <span class="pl-c1">-</span><span class="pl-c1">8</span><span class="pl-s1">px</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span> </pre></div>
<p dir="auto">Version</p>
<ul dir="auto">
<li>Material-UI: 1.0.0-beta.5</li>
</ul>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/5795257/29738714-a99e36da-8a01-11e7-8bb4-ea927d1f707d.png"><img src="https://user-images.githubusercontent.com/5795257/29738714-a99e36da-8a01-11e7-8bb4-ea927d1f707d.png" alt="screen shot 2017-08-26 at 1 54 20 am" style="max-width: 100%;"></a></p>
<p dir="auto">The <code class="notranslate">&lt;Grid container&gt;</code> extends beyond its parent, with half of spacing size.<br>
I have marked the extra width in red, also setting spacing to zero fixes the problem.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3260363/28355346-338983fc-6c81-11e7-9f67-fb33c7758283.png"><img src="https://user-images.githubusercontent.com/3260363/28355346-338983fc-6c81-11e7-9f67-fb33c7758283.png" alt="mobile-padding" style="max-width: 100%;"></a></p>
<p dir="auto">Here is a working example: <a href="https://codesandbox.io/s/Y8nzGm5W" rel="nofollow">https://codesandbox.io/s/Y8nzGm5W</a>.<br>
Similar code with a zero spacing works as expected: <a href="https://codesandbox.io/s/NxvYxvQpL" rel="nofollow">https://codesandbox.io/s/NxvYxvQpL</a>.</p>