I am working on a code snippet that looks like this:
<Box sx={{height:'100vh', background: '#f5f7fc', overflow:'auto'}}>
<Grid container justifyContent={'center'} padding={2}>
<Grid item xs={12}>
<Typography align="center" fontSize={30}>Welcome! Please enter your childs information</Typography>
</Grid>
<Grid item xs={10}>
<Paper>
<Grid container padding={2}>
<Grid item xs={6}>
<TextField fullWidth label='First Name'/>
</Grid>
<Grid item xs={6}>
<TextField fullWidth label='Last Name'/>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</Box>
Everything seemed fine until I decided to add some spacing with the following code:
<Paper>
<Grid container padding={2} spacing={2}>
Suddenly, the layout changed and now the Paper element is sticking out above the Grid, causing an imbalance in the padding.
This unexpected behavior has left me puzzled and my question is: what could be causing this issue?