title: Material-UI components overflows screen only on mobile
body: <p><strong>Edit</strong>: This is the only page with problems. Other pages of the same website display correctly.</p>
  
  <p>I've made a web page with React and Material-UI. The top components are <code>Grid</code> and <code>Container</code>. It looks good in desktop, but in mobile.. well.. this is the side of the screen:</p>
  
  <p><a href="https://i.stack.imgur.com/061Pw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/061Pw.png" alt="enter image description here"></a></p>
  
  <p>There's extra space created (light grey) and the Pictures and cards venture outside the screen max width. The header (blue) and the background (light blue) have the correct width (the width of the screen).</p>
  
  <p>i'm using <code>Grid</code> and <code>Container</code>.</p>
  
  <p>This is the root component that contains the cards:</p>
  
  <pre><code>&lt;Grid
    container
    spacing={0}
    direction="row"
    justify="space-around"
    alignItems="center"
    style={{ minHeight: "20vh" }}
  &gt; ....
  </code></pre>
  
  <p>This is another container that scapes the width:</p>
  
  <pre><code>&lt;Container maxWidth="lg" style={{ marginBottom: "5vh" }}&gt;
    &lt;Paper style={{ padding: 20 }}&gt;
      &lt;Grid
        container
        spacing={0}
        direction="column"
        justify="flex-start"
        alignItems="center"
      &gt; ....
  </code></pre>
  
  <p>The Header that displays correctly it's just an <code>AppBar</code>.</p>
  
  <p>The image at the top that overflows returns:</p>
  
  <pre><code>&lt;div className={classes.heroContent}&gt;
    &lt;Container maxWidth="md" align="center"&gt;
      &lt;Grid
        container
        direction="column"
        justify="flex-end"
        alignItems="center"
      &gt; ...
  </code></pre>
  
  <p>And the <code>classes.heroContent</code> is:</p>
  
  <pre><code> heroContent: {
      backgroundImage: `url(${grupo})`,
      backgroundSize: "cover",
      backgroundRepeat: "no-repeat",
      backgroundPosition: "center",
      padding: theme.spacing(8, 0, 8),
      minHeight: "20vh",
    }, ...
  </code></pre>
  
  <p>What could be the reason of this overflow thing? I've been reading the <a href="https://material-ui.com/components/grid/" rel="nofollow noreferrer">documentation</a> and I can't find the bug.</p>