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,60 +1,63 @@
-<div class="header">
+<div class="wrapper">
-    <div class="main" #header>
+    <div class="header">
-        <div class="logo">
+        <div class="main" #header>
-            <a routerLink="">
+            <div class="logo">
-                <img src="assets/img/logohideyoshi-white.png" alt="" />
+                <a routerLink="">
-            </a>
+                    <img src="assets/img/logohideyoshi-white.png" alt="" />
-        </div>
+                </a>
-        <div class="nav-links">
+            </div>
-            <ul class="link-container">
+            <div class="nav-links">
-                <li *ngFor="let page of pages">
+                <ul class="link-container">
-                    <a [routerLink]="page.route">{{ page.name }}</a>
+                    <li *ngFor="let page of pages">
-                </li>
+                        <a [routerLink]="page.route">{{ page.name }}</a>
-            </ul>
+                    </li>
-        </div>
+                </ul>
-
-        <div class="profile" #profileDropdown>
-            <div
-                class="profile-btn"
-                (click)="toogleProfileDropdown()"
-                #profileBtn
-            >
-                <fa-icon
-                    *ngIf="!loggedUser || !loggedUser.profilePictureUrl"
-                    class="fas fa-user"
-                    [icon]="userIcon"
-                ></fa-icon>
-                <img
-                    *ngIf="!!loggedUser && !!loggedUser.profilePictureUrl"
-                    class="profile-picture"
-                    [ngSrc]="loggedUser.profilePictureUrl"
-                    width="50"
-                    height="50"
-                    alt="Profile Picture"
-                    priority
-                />
             </div>
 
-            <app-header-dropdown
+            <div class="profile" #profileDropdown>
-                class="dropdown"
+                <div
-                (clickOutside)="closeDropdown()"
+                    class="profile-btn"
-                [ignoreClickOutside]="[profileBtn]"
+                    (click)="toogleProfileDropdown()"
-                [state]="profileDropdownState"
+                    #profileBtn
-                (loginPopupState)="loginPopupStateChange($event)"
+                >
-                (signupPopupState)="signupPopupStateChange($event)"
+                    <fa-icon
-                (myProfilePopupState)="myProfilePopupStateChange($event)"
+                        *ngIf="!loggedUser || !loggedUser.profilePictureUrl"
-                (helpPopupState)="helpPopupStateChange($event)"
+                        class="fas fa-user"
-            >
+                        [icon]="userIcon"
-            </app-header-dropdown>
+                    ></fa-icon>
-        </div>
+                    <img
-        <div class="burger-container" (click)="toogleNavSlider()">
+                        *ngIf="!!loggedUser && !!loggedUser.profilePictureUrl"
-            <div
+                        class="profile-picture"
-                class="burger-menu"
+                        [ngSrc]="loggedUser.profilePictureUrl"
-                [ngClass]="{ open: navSliderStatus }"
+                        width="50"
-            ></div>
+                        height="50"
+                        alt="Profile Picture"
+                        priority
+                    />
+                </div>
+
+                <app-header-dropdown
+                    class="dropdown"
+                    (clickOutside)="closeDropdown()"
+                    [ignoreClickOutside]="[profileBtn]"
+                    [state]="profileDropdownState"
+                    (loginPopupState)="loginPopupStateChange($event)"
+                    (signupPopupState)="signupPopupStateChange($event)"
+                    (myProfilePopupState)="myProfilePopupStateChange($event)"
+                    (helpPopupState)="helpPopupStateChange($event)"
+                >
+                </app-header-dropdown>
+            </div>
+            <div class="burger-container" (click)="toogleNavSlider()">
+                <div
+                    class="burger-menu"
+                    [ngClass]="{ open: navSliderStatus }"
+                ></div>
+            </div>
         </div>
     </div>
-    <div #nav>
+
+    <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;