<h3 dir="auto">Problem description</h3>
<p dir="auto">When Adding a <code class="notranslate">Grid</code> component at the root of a component I notice that class <code class="notranslate">MuiGrid-spacing-xs-16-470</code> is appended to the root element.<br>
it's width is set to <code class="notranslate">calc(100% + 16px);</code> witch is obviously 16px more than page width.<br>
Is this a bug or I'm missing sth?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import PropTypes from 'prop-types';
import Header from '../common/Header/Header';
import Sidebar from '../common/Sidebar/Sidebar';
import Grid from 'material-ui/Grid';

class Template extends Component {
    constructor() {
    super();
    this.state = { isDrawerOpen: false };
    this.toggleDrawer = this.toggleDrawer.bind(this);
    this.closeDrawer = this.closeDrawer.bind(this);
    this.setDrawerState = this.setDrawerState.bind(this);
   }

  setDrawerState(state) {
     this.setState({ isDrawerOpen: state });
  }

   toggleDrawer() {
     this.setDrawerState(!this.state.isDrawerOpen);
    }

   closeDrawer() {
      this.setDrawerState(false);
    }

   render() {
      const { component, ...rest } = this.props;
      return (
        &lt;Route
           {...rest}
         render={() =&gt; (
          &lt;div&gt;
          &lt;Header
            onDrawerButtonClicked={this.toggleDrawer}
          /&gt;
          &lt;Sidebar
               open={this.state.isDrawerOpen}
               onRequestClose={this.closeDrawer}
         /&gt;
           &lt;Grid container&gt;
              {component}
            &lt;/Grid&gt;
          &lt;/div&gt;
        )}
      /&gt;
     );
   }
   }
   Template.propTypes = {
    component: PropTypes.element.isRequired,
  };

    export default Template;"><pre class="notranslate"><code class="notranslate">import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import PropTypes from 'prop-types';
import Header from '../common/Header/Header';
import Sidebar from '../common/Sidebar/Sidebar';
import Grid from 'material-ui/Grid';

class Template extends Component {
    constructor() {
    super();
    this.state = { isDrawerOpen: false };
    this.toggleDrawer = this.toggleDrawer.bind(this);
    this.closeDrawer = this.closeDrawer.bind(this);
    this.setDrawerState = this.setDrawerState.bind(this);
   }

  setDrawerState(state) {
     this.setState({ isDrawerOpen: state });
  }

   toggleDrawer() {
     this.setDrawerState(!this.state.isDrawerOpen);
    }

   closeDrawer() {
      this.setDrawerState(false);
    }

   render() {
      const { component, ...rest } = this.props;
      return (
        &lt;Route
           {...rest}
         render={() =&gt; (
          &lt;div&gt;
          &lt;Header
            onDrawerButtonClicked={this.toggleDrawer}
          /&gt;
          &lt;Sidebar
               open={this.state.isDrawerOpen}
               onRequestClose={this.closeDrawer}
         /&gt;
           &lt;Grid container&gt;
              {component}
            &lt;/Grid&gt;
          &lt;/div&gt;
        )}
      /&gt;
     );
   }
   }
   Template.propTypes = {
    component: PropTypes.element.isRequired,
  };

    export default Template;
</code></pre></div>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 1.0.0-beta7</li>
<li>React: ^15.6.1</li>
<li>Browser: Chrome 60</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>