Выравнивание компонентов сетки

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>
);

Я заметил, что с правой стороны есть небольшое пространство.

Как я могу одинаково выровнять контент на странице, чтобы на краю экрана не было места?

Спасибо