Rename Header to NavBar and add it to the bottom too

styles/Footer.module.scss

@@ -3,6 +3,7 @@
   flex-direction: column;
   align-items: center;
   margin-bottom: 30px;
+  margin-top: 3rem;
 }
 
 .container {

styles/Index.module.scss

@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  margin-bottom: 8rem;
   width: 47rem;
   max-width: 100%;
+  margin-bottom: 4rem;
 }

styles/NavBar.module.scss

@@ -1,12 +1,15 @@
-.header {
+.navBarContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
 }
 
 .navBar {
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
 }
 
 .navBarLink {
@@ -14,10 +17,7 @@
   padding-right: 15px;
   color: #2f273e;
   text-decoration: none;
-}
-
-.navBarLink:hover {
-  color: #69568b;
+  font-size: 1.4rem;
 }
 
 @media screen and (max-width: 600px) {
@@ -32,10 +32,4 @@
     margin-right: 1rem;
     width: auto;
   }
-
-  .navBar {
-    flex-wrap: wrap;
-    margin-bottom: 1rem;
-    margin-top: 1rem;
-  }
 }

styles/Shared.module.scss

@@ -16,7 +16,6 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  margin-bottom: 8rem;
   width: 47rem;
   max-width: 100%;
 }