网格组件对齐

Question

我创建了一个包含三个项目的基本网格布局。

 import { withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';

function Layout(props) {

return (
    <Grid container spacing={24}>
        <Grid item xs={12}>
            <Paper square  ><img src="wind/images.jpg"/></Paper>
            <Paper square  ><img src="wind/images.jpg"/></Paper>
            <Paper square  ><img src="wind/images.jpg"/></Paper>
        </Grid>
    </Grid>
);

我注意到右侧有一个小空间。

如何均匀对齐页面上的内容，以使屏幕边缘没有空间？

谢谢