<h3 dir="auto">Problem description</h3>
<p dir="auto">The <code class="notranslate">&lt;Grid container&gt;</code> component receives these props</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".MuiGrid-spacing-xs-16-1335 {
    width: calc(100% + 16px);
    margin: -8px;
}"><pre class="notranslate">.<span class="pl-c1">MuiGrid-spacing-xs-16-1335</span> {
    <span class="pl-c1">width</span><span class="pl-kos">:</span> <span class="pl-en">calc</span>(<span class="pl-c1">100<span class="pl-smi">%</span></span> <span class="pl-c1">+</span> <span class="pl-c1">16<span class="pl-smi">px</span></span>);
    <span class="pl-c1">margin</span><span class="pl-kos">:</span> <span class="pl-c1">-8<span class="pl-smi">px</span></span>;
}</pre></div>
<p dir="auto">causing a horizontal scrollbar. See <a href="https://stackoverflow.com/questions/45519275/grid-in-material-ui-causes-horizontal-scroll-react" rel="nofollow">this</a> question for a more accurate example and the (unelegant) fix.</p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Create an empty project and create one <code class="notranslate">&lt;Grid&gt;</code> with a single item inside. Your page will have a horizontal scroll bar.</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: beta 5</li>
<li>React: 15.6.1</li>
<li>Browser: Chrome 60</li>
</ul>
<h3 dir="auto">Proposed solution</h3>
<p dir="auto">Only apply the spacing class and its variants on <code class="notranslate">&lt;Grid&gt;</code> children. I suppose this may be a little inconsistent in the case where you are nesting <code class="notranslate">&lt;Grid&gt;</code> containers, so an alternative could be to just have a prop like <code class="notranslate">applySpacingToContainerOnly={true}</code> (default: <code class="notranslate">false</code>) or something?</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>