remove excess width

src/App.js

@@ -30,9 +30,8 @@ const useStyles = makeStyles(theme => ({
 		flexGrow: 1,
 	},
 	margin: {
-		margin: theme.spacing(4)
+		marginTop: theme.spacing(3),
 	},
-
 	button: {
 		margin: theme.spacing(1),
 	},
@@ -92,12 +91,13 @@ function App() {
 	}
 
 	return (
-		<div className={classes.root}>
+			<Grid container justify="center" spacing={0}>
+				<Grid item xs={12}>
 					<AppBar position="static">
 						<Toolbar>
 						</Toolbar></AppBar>
-			<Grid container justify="center" className={classes.margin} spacing={4}>
-				<Grid item xs={12} md={10} lg={8}>
+				</Grid>
+				<Grid item className={classes.margin} xs={12} md={10} lg={8}>
 					<Paper className={classes.paper}>
 						<Grid container spacing={2}>
 							<Grid item xs={12}>
@@ -169,7 +169,7 @@ function App() {
 					</Paper>
 				</Grid>
 
-				<Grid item xs={12} md={10} lg={8}>
+				<Grid item className={classes.margin} xs={12} md={10} lg={8}>
 					<Paper className={classes.paper}>
 						<Grid container spacing={2}>
 							<Grid item xs={12}>
@@ -207,7 +207,6 @@ function App() {
 					</Paper>
 				</Grid>
 			</Grid>
-		</div>
 	);
 }