Fixes Header and Footer

src/app/footer/footer.component.css

@@ -20,18 +20,22 @@
     padding: 20px 0;
 }
 
-.footer-links a {
-    color: #ffffff;
-    font-size: 18px;
-    margin: 0 10px;
-}
-
 .footer-btn {
     color: #ffffff;
     font-size: 18px;
     border: 1px solid #ffffff;
     border-radius: 50%;
-    margin: 0 5px;
+    margin: 0 10px;
+
+    width: 42px;
+    height: 42px;
+}
+
+.footer-btn a {
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
 }
 
 .footer-btn:hover {

src/app/header/header.component.css

@@ -1,12 +1,22 @@
+.wrapper {
+    width: 100vw;
+    overflow: hidden;
+}
+
 .header {
     top: 0;
     left: 0;
     display: flex;
     position: fixed;
-    width: 100%;
+    width: 100vw;
+
     background-color: #2e2e2e;
+
     height: 10vh;
     min-height: 80px;
+
+    justify-content: center;
+    align-items: center;
 }
 
 .header-spacer {
@@ -100,6 +110,10 @@ app-header-slider {
 /* ====================== COMPUTER MEDIA FORMAT ======================== */
 
 @media only screen and (min-width: 712px) {
+    .main {
+        max-width: 1333px;
+    }
+
     .nav-links {
         all: unset;
         width: 50%;

src/app/header/header.component.html

@@ -1,4 +1,5 @@
-<div class="header">
+<div class="wrapper">
+    <div class="header">
         <div class="main" #header>
             <div class="logo">
                 <a routerLink="">
@@ -54,7 +55,9 @@
                 ></div>
             </div>
         </div>
-    <div #nav>
+    </div>
+
+    <div class="slider-container" #nav>
         <app-header-slider
             [(state)]="navSliderStatus"
             [clickOutsideStopWatching]="userSliderStatus"
@@ -69,7 +72,7 @@
         </app-header-slider>
     </div>
 
-    <div #user>
+    <div class="slider-container" #user>
         <app-header-slider
             [(state)]="userSliderStatus"
             [ignoreClickOutside]="[header, nav]"
@@ -85,4 +88,5 @@
         </app-header-slider>
     </div>
 </div>
+
 <div class="header-spacer"></div>

src/app/header/header.component.ts

@@ -33,8 +33,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
     profileDropdownState: boolean = false;
 
-    signupPopupState: boolean = false;
-
     navSliderStatus: boolean = false;
 
     userSliderStatus: boolean = false;