React Material UI Nested Grid - Not working - reactjs

Question

I'm trying to generate a grid that is three deep. Example below:
I want the black box to stretch the length of the screen, and the three boxes to be aligned on the same row. I have put the three boxes in another grid that will go to a max-width of 1200px. this is so it looks neat on large screens. I want the three boxes to stack on mobile.
below is my code
const Landing = (props) => {
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
blackBox:{
color:'white',
backgroundColor:'black',
width:'100%',
},
white:{
color:'white',
}
}));
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container className={classes.blackBox}>
<Container maxWidth="sm">
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text</Typography>
</Grid>
</Container>
</Grid>
</div>
);
}
export default Landing;
The issue is when I add the element that only allow the three boxed to go max 1200 they all stack. When I remove it they don't stack but stretch the full with of the screen.
can anyone point me in the right direction?

Answer 1

You should put the Container outside the Grid
<Grid container className={classes.blackBox}>
<Container maxWidth="sm">
<Grid container>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text</Typography>
</Grid>
</Grid>
</Container>
</Grid>