Question: I'm using Material UI grid and as soon as I put spacing higher than 0 ,my Grid doesnt fit the screen and bottom slider is visible and i can move the page horizontally a bit.

Simplified code i'm using :

```
<Grid container
  justify="space-around"
  spacing={4}>
  <Grid item xs={6} >
    <Paper>a</Paper>
  </Grid>

  <Grid item xs={6} >
    <Paper>b</Paper>
  </Grid>

</Grid>

```

With spacing = 0 , the grid fits completely and bottom slider is not there. How do I still keep spaces between grid items making sure the grid doesnt increase the width of the app . What am I doing wrong?

Link to codesandbox with same issue replicated : <https://codesandbox.io/s/magical-sammet-y0297?fontsize=14&hidenavigation=1&theme=dark>

Thanks

Answer: 
Here is the official answer to this question courtesy of the [docs](https://material-ui.com/components/grid/#limitations):

> 
> Negative margin
> 
> 
> There is one limitation with the negative margin we use to implement the spacing between items. A horizontal scroll will appear if a negative margin goes beyond the . There are 3 available workarounds:
> 
> 
> 1. Not using the spacing feature and implementing it in user space spacing={0} (default).
> 2. Applying padding to the parent with at least half the spacing value applied to the child:
> 
> 
> 
> ```
> <body>
>  <div style={{ padding: 20 }}>
>    <Grid container spacing={5}>
>      //...
>    </Grid>
>  </div>
> </body>
> 
> ```
> 
> 3. Adding overflow-x: hidden; to the parent.
> 
> 
>
```
<Grid container justify="space-around" spacing={8}>
  <Grid item xs >
    <Paper>a</Paper>
  </Grid>
  <Grid item xs >
    <Paper>b</Paper>
  </Grid>
</Grid>

```

Assuming that you want to keep the columns of equal width you can keep them dynamic `<Grid item xs >` rather then assigning a fix width of `<Grid item xs={6} >` to both, allowing the component to resize its width according to the available space.