title: <Grid> in material ui causes horizontal scroll- React
body: <p>I'm using <code>Material-UI</code> version 1. installed by this command:</p>
  <pre><code>npm install -S material-ui@next
  </code></pre>
  <p>Everytime I want to use , an unwanted horizontal scroll appears in the page.</p>
  <p>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: &quot;3rem&quot;
    },
  }));
  
  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><code>Bootstrap</code> and other <code>grid layout</code> options are in conflict with this library. When I use <code>&lt;Grid&gt;</code> in other parts of a component(for example in drawer), horizontal scroll appears makes the UI ugly
  <code>NavMenu</code> and <code>LoginPanel</code> are some self-made components and they work and using them without  doesn't cause horizontal scroll.</p>