<Grid> in material ui causes horizontal scroll- React : <p>i'm using material ui version 1. installed by this command:</p>

<pre><code>npm install -S material-ui@next
</code></pre>

<p>every time i wanna use , an unwanted horizontal scroll appears in page. for example this is a simple code:</p>

<pre><code>import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';


/* project imports */
import NavMenu from './Page-Parts/NavMenu';
import LoginPanel from './Login-Parts/LoginPanel';

const styleSheet = createStyleSheet('FullWidthGrid', theme =&gt; ({
  root: {
    flexGrow: 1,
    marginTop: 0,
  },
  paper: {
    padding: 16,
    textAlign: 'center',
    color: theme.palette.text.secondary,
    marginTop: "3rem"
  },
}));

function Login(props){
    const classes = props.classes;
    return (
    &lt;div className={classes.root}&gt;
      &lt;Grid container gutter={24} justify='center'&gt;
        &lt;Grid item xs={12} md={12} sm={12} lg={12}&gt;
          &lt;NavMenu/&gt;
        &lt;/Grid&gt;
        &lt;Grid item xs={6} sm={6} md={6} lg={6}&gt;
          &lt;Paper className={classes.paper}&gt;
            &lt;LoginPanel /&gt;
          &lt;/Paper&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    &lt;/div&gt;
    );
}

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

export default withStyles(styleSheet)(Login);
</code></pre>

<p>i can't use bootstrap or any other grid layout options because they're in conflict with this library. this code example isn't a big deal but when i use  in other parts of a component(for example in drawer), horizontal scroll appears makes the ui ugly
NavMenu and LoginPanel are some self-made components and they're ok. using them without  don't cause horizontal scroll</p>
