footer at bottom

frontend/src/App.vue

@@ -1,8 +1,14 @@
 <template>
-  <div id="app">
-    <Header />
-    <router-view />
-    <Footer />
+  <div class="app">
+    <div>
+      <Header />
+    </div>
+    <div class="Site-content">
+      <router-view />
+    </div>
+    <div>
+      <Footer />
+    </div>
   </div>
 </template>
 
@@ -20,9 +26,11 @@ export default {
 </script>
 
 <style scoped>
-#app {
-  /* font-family: Avenir, Helvetica, Arial, sans-serif; */
 
+.app {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
   font-family: 'Montserrat', sans-serif;
 
   -webkit-font-smoothing: antialiased;
@@ -30,17 +38,9 @@ export default {
   background-color: #131313;
    color: #f1f1f1f1;
 }
-
-#nav {
-
+.Site-content {
+  flex: 1;
 }
 
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
 
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
 </style>

frontend/src/views/About.vue

@@ -15,5 +15,7 @@ export default {
 };
 </script>
 <style scoped>
+  .about{
     
+  }
 </style>

frontend/src/views/Home.vue

@@ -2,6 +2,7 @@
   <div class="home">
 
     <h3>Home View</h3>
+
   </div>
 </template>
 
@@ -18,5 +19,7 @@ export default {
 </script>
 
 <style scoped>
+  .home {
     
+  }
 </style>