title: Full Width Material-UI Grid not working as it should
body: <p>I am trying to understand Material-UI@next grid layout system. </p>
  
  <p>My goal is to have two papers that expand through the whole width screen and break whenever the screen gets smaller to just one paper. The <a href="https://material-ui-next.com/layout/grid/" rel="noreferrer">documentation</a> has the following code snippet:</p>
  
  <pre><code>  &lt;Container&gt;
      &lt;Grid container spacing={24}&gt;
        &lt;Grid item xs={12}&gt;
          &lt;Paper&gt;xs=12&lt;/Paper&gt;
        &lt;/Grid&gt;
        &lt;Grid item xs={12} sm={6}&gt;
          &lt;Paper&gt;xs=12 sm=6&lt;/Paper&gt;
        &lt;/Grid&gt;
        &lt;Grid item xs={12} sm={6}&gt;
          &lt;Paper&gt;xs=12 sm=6&lt;/Paper&gt;
        &lt;/Grid&gt;
        &lt;Grid item xs={6} sm={3}&gt;
          &lt;Paper&gt;xs=6 sm=3&lt;/Paper&gt;
        &lt;/Grid&gt;
        &lt;Grid item xs={6} sm={3}&gt;
          &lt;Paper&gt;xs=6 sm=3&lt;/Paper&gt;
        &lt;/Grid&gt;
        &lt;Grid item xs={6} sm={3}&gt;
          &lt;Paper&gt;xs=6 sm=3&lt;/Paper&gt;
        &lt;/Grid&gt;
        &lt;Grid item xs={6} sm={3}&gt;
          &lt;Paper&gt;xs=6 sm=3&lt;/Paper&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    &lt;/Container&gt;
  </code></pre>
  
  <p>This results in the following:
  <a href="https://i.stack.imgur.com/rVdfw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rVdfw.png" alt="enter image description here"></a></p>
  
  <p>I then modified the code to try to achieve my goal of just two papers, as this:</p>
  
  <pre><code>  &lt;Container&gt;
      &lt;Grid container spacing={24}&gt;
        &lt;Grid item xs={12} sm={6}&gt;
          &lt;Paper&gt;xs=12 sm=6&lt;/Paper&gt;
        &lt;/Grid&gt;
        &lt;Grid item xs={12} sm={6}&gt;
          &lt;Paper&gt;xs=12 sm=6&lt;/Paper&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    &lt;/Container&gt;
  </code></pre>
  
  <p>But as you can see, this results into two papers which are not taking the whole screen:
  <a href="https://i.stack.imgur.com/XHYwA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XHYwA.png" alt="enter image description here"></a></p>
  
  <p>Can someone point me to a working example snippet that allows me to have two elements that take the full width?</p>