I'm having trouble understanding the grid system in material UI. I have two grid items inside my grid container and I want them to both be centered and fill the full width of the grid container. The button element is centered, however the typography element is not. 

Any ideas why ?

```html
<Grid container justify="center" allignItems="center">
  <Grid item xs={ 12}>
    <Typography>{props.currentUser} Account details</Typography>
  </Grid>
  <Grid item allignItems="center">
    <Button color="primary" variant={ "contained"} onClick={ ()=> props.logout()}>
              Log out
            </Button>
  </Grid>
</Grid>

```