On my mobile screen, my components should be taking up the entire width but they seem to have an invisible margin on the right.
<React.Fragment>
<CssBaseline />
<ThemeProvider theme={theme}>
<Grid container direction='column'>
<Grid container justifyContent='center'>
<Grid item xs={12} sm={10}>
<Header connectWallet={connectWallet}/>
</Grid>
</Grid>
<Grid container justifyContent='center' alignItems='center'>
<Grid item sx={{minHeight: 'calc(100vh - 400px)'}} xs={12} sm={10}>
<Switch>
<Route path="/bouquets">
<Bouquets />
</Route>
<Route path='/about'>
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Grid>
</Grid>
<Grid item xs={12}>
<Footer/>
</Grid>
</Grid>
</ThemeProvider>
</React.Fragment>