styles update

src/components/App.js

@@ -7,19 +7,32 @@ 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 />
-      <Switch>
+      <Container className={classes.content}>
-        <Route exact path="/" component={HomePage} />
+        <Switch>
-        <Route path="/about" component={AboutPage} />
+          <Route exact path="/" component={HomePage} />
-        <Route path="/sessions" component={SessionContainer} />
+          <Route path="/about" component={AboutPage} />
-        <Route component={PageNotFound} />
+          <Route path="/sessions" component={SessionContainer} />
-      </Switch>
+          <Route component={PageNotFound} />
-      <ToastContainer autoClose={3000} />
+        </Switch>
+        <ToastContainer autoClose={3000} />
+      </Container>
     </div>
   );
 }

src/index.css

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