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: 
You can use {gap:15} as style

```
<Grid container style={{ gap: 15 }}>
            <Grid item xs={12}>
              //one element
            </Grid>
            <Grid item xs={12}>
              //other element
            </Grid>
          </Grid>

```

or you can use `spacing`

```
<Grid container spacing={1}>
     <Grid item xs={12}>
     ...

```
Reduce the spacing dimension. `spacing={4}` is providing `4*8=32px` of space around the Grid items. Consequently, horizontal scroll bar is appearing in your page, as the width of the two contained grids along with the space is more than the width of the sandbox browser window. I checked with `spacing={2}` which puts a space of `2*8=16px` around the grid items; The items have enough space between them and the horizontal scroll bar is not appearing. From the [documentation](https://material-ui.com/components/grid/#spacing)

> 
> The responsive grid focuses on consistent spacing widths, rather than
> column width. Material Design margins and columns follow an 8px square
> baseline grid. The spacing property is an integer between 0 and 10
> inclusive. By default, the spacing between two grid items follows a
> linear function: output(spacing) = spacing \* 8px, e.g. spacing={2}
> creates a 16px wide gap.
> 
> 
>