Trying to center a logo in my log in form with `Material-UI`, everything else appears to be centered exception of the logo which is hugging the left side of the card.

I've tried adding `align="center"` and `justify="center"` under the img tag but it still is not moving the image in the center of the card. I've also tried adding a "gridItem" `alignItems:'center'` under my const styles

```
const styles = theme => ({
    logo: {
        padding: "1rem",
        width: 300,
        [theme.breakpoints.down("sm")]: {
            width: 200,
        }
    },

    appName: {
        color: '#2979ff',
        [theme.breakpoints.down("sm")]: {
            fontSize: theme.typography.h5.fontSize
        }
    },
});

```

```
<Grid container justify="center" alignItems="center">
    <Grid item>
    <Card>
    <Grid item> 
    <img className={classes.logo} alt="Portal Logo" src={Logo} align="center" />
</Grid>

```

I am expecting the logo to be centered in my my "login" form that I've created.