Material UI - Center Card within a grid?

Question

Hi I am trying to centre a card within a cred however its looking like this and Im not too sure why. I coloured the grid background red and blue to make it easier to see.

Any help would be amazing.

Here is my code:

    </Typography>
            <Grid
                container
                spacing={2}
                direction="row"
                alignItems="center"
                justifyContent="center"
            >
                <Grid
                    item
                    xs={3}
                    style={{ backgroundColor: "red" }}
                    alignItems="center"
                >
                    <CardContent style={{ backgroundColor: "white" }}>
                        <Typography
                            sx={{ fontSize: 14 }}
                            color="text.secondary"
                            gutterBottom
                        >
                            Word of the Day
                        </Typography>
                        <Typography variant="h5" component="div">
                            Hello
                        </Typography>
                        <Typography sx={{ mb: 1.5 }} color="text.secondary">
                            adjective
                        </Typography>
                        <Typography variant="body2">
                            well meaning and kindly.
                            <br />
                            {'"a benevolent smile"'}
                        </Typography>
                    </CardContent>
                    <CardActions>
                        <Button size="small">Learn More</Button>
                    </CardActions>
                </Grid>
                <Grid item xs={3} style={{ backgroundColor: "blue" }}>
                    {" "}
                    <h3> Orders</h3>
                    <Typography variant="h4" component="h1">
                        {ordersCount}
                    </Typography>
                </Grid>
            </Grid>

And here is what it looks like:

Current code output

This is the desired design

Answer 1

Try to change the Grid like this:

 <Grid
            container
            spacing={2}
            direction="row"
            alignItems="center"
            // justifyContent is removed
        >

Because justifyContent is placing your Grid at the center of the screen.