Update code

src/styles/layouts/_header.scss

@@ -1,11 +1,9 @@
 .header {
   position: relative;
-  display: flex;
-  justify-content: space-between;
+  align-items: center;
   max-width: $max-width;
   min-width: $min-width;
   padding: 24px;
-  margin: auto;
 }
 
 @media screen and (min-width: 840px) {
@@ -16,11 +14,8 @@
   }
 
   .header-content {
-    display: flex;
-    justify-content: space-between;
     gap: 10px;
     width: 100%;
     max-width: 918px;
-    height: auto;
   }
 }

src/styles/layouts/_navbar.scss

@@ -1,19 +1,23 @@
 .nav-list {
+  flex-direction: column;
   list-style: none;
   transition: 0.1s;
   position: fixed;
   border: 2px solid $primary-color;
-  top: 0px;
+  top: 0;
   right: -300px;
-  width: auto;
-  height: auto;
-  margin-top: 80px;
+  margin-top: 105px;
   margin-right: 10px;
-  z-index: 2;
+  margin-left: 10px;
+  background-color: $white;
+}
+
+.nav-download-btn {
+  display: none;
 }
 
 .nav-item {
-  font-size: 14px;
+  font-size: $fs-xx-sm;
   padding: 14px;
   border-bottom: 1px solid $black;
 
@@ -27,29 +31,33 @@
 }
 
 .nav-link {
-  text-decoration: none;
   color: $black;
 }
 
 @media screen and (min-width: 840px) {
   .nav {
-    margin: auto;
     width: 100%;
-    height: auto;
+  }
+
+  .nav-download-btn {
+    display: block;
+
+    &:hover {
+      background-color: $secondary-color;
+    }
   }
 
   .nav-list {
     position: unset;
-    display: flex;
-    justify-content: space-between;
+    flex-direction: row;
     border: none;
-    margin: auto;
     max-width: 600px;
+    margin: unset;
   }
 
   .nav-item {
     border-bottom: none;
-    padding: 0px;
+    padding: 0;
 
     &:hover {
       background-color: unset;