[Grid] Unexpected spacing behavior

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

In the Material UI documentation on the Grid component examples, it works fine inside the main container when using spacing

Expected Behavior 🤔

What is expected is that if I copy and paste the same example code to be able to test it will behave in the same way, but this does not work Link to codesandbox

It ends up generating a horizontal scroll.

Some solutions are given, but I don’t see these being used in the example.

• We are using a Container component as parent

Steps to Reproduce 🕹

Steps:

1. Copy NestedGrid code example
2. Paste to codesandbox
3. Run app

Context 🔦

We were building a Layout for a page and we were in doubt regarding the spacing of the Grid component since we began to have several problems with horizontal scrolling.

Our implementation is

container: {
  paddingTop: 8,
  paddingBottom: 8,
}

<Container className={classes.container}>
  <Grid container spacing={2}>
    <Grid item xs>
      ...
    </Grid>
  </Grid>
</Container>

Your Environment 🌎

Material UI v4.11.2 React v17.0.1

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

[oliviertassinari]

But I wonder if item should only have left and top padding instead of having them on its 4 axes.

I don’t think that it matter

[povilass]

Ok example showed problem bus still you need applied half spacing size to parent https://codesandbox.io/s/new-cache-lrynu like the documentation says.