styles update

src/components/App.js

@@ -7,12 +7,24 @@ import PageNotFound from "./PageNotFound";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import SessionContainer from "../features/session/components/SessionContainer";
+import { makeStyles } from "@material-ui/core/styles";
+import { Container } from "@material-ui/core";
+
+const useStyles = makeStyles(() => ({
+  content: {
+    "padding-left": "30px",
+    "padding-right": "30px"
+  }
+}));
 
 function App() {
+  const classes = useStyles();
+
   return (
     <div>
       <Header />
       <br />
+      <Container className={classes.content}>
         <Switch>
           <Route exact path="/" component={HomePage} />
           <Route path="/about" component={AboutPage} />
@@ -20,6 +32,7 @@ function App() {
           <Route component={PageNotFound} />
         </Switch>
         <ToastContainer autoClose={3000} />
+      </Container>
     </div>
   );
 }

src/index.css

@@ -1,7 +1,5 @@
 #app {
   margin: 0 auto;
-  padding-left: 50px;
-  padding-right: 50px;
 }
 
 nav {