<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';

const styleSheet = createStyleSheet(theme =&gt; ({
  root: {
      width:'100%',
    flexGrow: 1,
  },
  container:{
      marginTop:'30px',
  },
  flex: {
    flex: 1,
  },
}));

function Main(props) {
  const classes = props.classes;
  return (
      &lt;div className={classes.root}&gt;
        &lt;AppBar position=&quot;static&quot; color=&quot;accent&quot;&gt;
                &lt;Toolbar&gt;
                    &lt;IconButton color=&quot;contrast&quot; aria-label=&quot;Menu&quot;&gt;
                        &lt;MenuIcon /&gt;
                    &lt;/IconButton&gt;
                    &lt;Typography type=&quot;title&quot; color=&quot;inherit&quot; className={classes.flex}&gt;
                        美美，我爱你
                    &lt;/Typography&gt;
                    &lt;Button color=&quot;contrast&quot;&gt;登录&lt;/Button&gt;
                &lt;/Toolbar&gt;
        &lt;/AppBar&gt;
        &lt;Grid container &gt;
                &lt;Grid item xs&gt;
                    sdf
                &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/div&gt;
  );
}

Main.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styleSheet)(Main);"><pre class="notranslate"><code class="notranslate">import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';

const styleSheet = createStyleSheet(theme =&gt; ({
  root: {
      width:'100%',
    flexGrow: 1,
  },
  container:{
      marginTop:'30px',
  },
  flex: {
    flex: 1,
  },
}));

function Main(props) {
  const classes = props.classes;
  return (
      &lt;div className={classes.root}&gt;
        &lt;AppBar position="static" color="accent"&gt;
                &lt;Toolbar&gt;
                    &lt;IconButton color="contrast" aria-label="Menu"&gt;
                        &lt;MenuIcon /&gt;
                    &lt;/IconButton&gt;
                    &lt;Typography type="title" color="inherit" className={classes.flex}&gt;
                        美美，我爱你
                    &lt;/Typography&gt;
                    &lt;Button color="contrast"&gt;登录&lt;/Button&gt;
                &lt;/Toolbar&gt;
        &lt;/AppBar&gt;
        &lt;Grid container &gt;
                &lt;Grid item xs&gt;
                    sdf
                &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/div&gt;
  );
}

Main.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styleSheet)(Main);
</code></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/30659653/29019483-3b964d2c-7b91-11e7-8637-7d29623e09ef.png"><img src="https://user-images.githubusercontent.com/30659653/29019483-3b964d2c-7b91-11e7-8637-7d29623e09ef.png" alt="image" 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>