Components overlapping in React using @material-ui/core

Question

I am new to React and I am watching a tutorial on youtube. The guy is using some styling from @material-ui/core and his project looks like this https://www.youtube.com/watch?v=ngc9gnGgUdA&t=2209s at min 36:50 while mine looks as the following picture.

This is the code

import {Container, AppBar, Typography, Grow, Grid} from '@material-ui/core'

<Container maxWidth='lg'>
  <AppBar  positin="static" color='inherit'>
    <Typography  variant='h2' align='center'>Memories</Typography> 
    <img  src={memories} alt='memories' height={60}/>
  </AppBar>
  <Grow in>
    <Container>
      <Grid container justifyContent='space-between' alignItems='stretch' spacing={3}>
        <Grid item xs={12} sm={7}>
          <Posts />
        </Grid>
        <Grid item xs={12} sm={4}>
          <Form/>
        </Grid>
      </Grid>
    </Container>
  </Grow>
</Container>

And another thing is that the <AppBar> and <Grow> components start from the top of the page and overlap with each other. If I remove the <AppBar> the page looks like this.

As you can see there is POSTS, POST and FORM hiding behind the other <AppBar>.

I am using the exact same code and don't understand why there are so many differences. The styling part might be fixable if I play with it, but I don't understand why the overlapping happens and how to fix it.