<p dir="auto">I was designing my app using the <code class="notranslate">Layout</code> features provided by <a href="https://material-ui-1dab0.firebaseapp.com/layout/grid" rel="nofollow">material-ui@next</a>, I had some trouble du to the fact that <code class="notranslate">gutter</code> properties makes grow my container by <a href="https://github.com/callemall/material-ui/blob/v1-beta/src/Grid/Grid.js#L74">gutter/2</a> with the extra margin applied. now after reading the code, I came to conclusion that it was intentional.</p>
<p dir="auto">But i found it counterintuitive, I would rather have the <code class="notranslate">gutter/2</code> applied to the <code class="notranslate">padding</code> properties than to the <code class="notranslate">margin</code> properties of the <code class="notranslate">container</code></p>
<p dir="auto">What to do you think?</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: next</li>
</ul>
<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>