Fix header in mobile

client/styles/main.scss

@@ -223,7 +223,7 @@ p {
     margin: 0;
 }
 
-p + p {
+p+p {
     margin-top: 0.5rem;
 }
 
@@ -314,6 +314,7 @@ main {
         grid-template-columns: auto auto;
         gap: 1rem;
     }
+
     .info-box {
         padding: 1rem;
         font-size: 28px;
@@ -411,12 +412,15 @@ main.page-scores {
                 &:first-child {
                     border-top-left-radius: 0.5rem;
                 }
+
                 &:nth-child(3) {
                     border-top-right-radius: 0.5rem;
                 }
+
                 &:nth-last-child(3) {
                     border-bottom-left-radius: 0.5rem;
                 }
+
                 &:last-child {
                     border-bottom-right-radius: 0.5rem;
                 }
@@ -441,6 +445,7 @@ main.page-scores {
                     &:nth-child(3n + 1) {
                         text-align: left;
                     }
+
                     &:nth-child(3n + 2),
                     &:nth-child(3n + 3) {
                         text-align: center;
@@ -467,10 +472,11 @@ main.page-scores {
                     }
 
                     &:hover {
-                        &:nth-child(3n + 1) + .cell + .cell::after {
+                        &:nth-child(3n + 1)+.cell+.cell::after {
                             background: #00000006;
                         }
-                        &:nth-child(3n + 2) + .cell::after {
+
+                        &:nth-child(3n + 2)+.cell::after {
                             background: #00000006;
                         }
                     }
@@ -528,13 +534,26 @@ header {
 
     nav {
         position: absolute;
-        right: 2rem;
-
-        display: flex;
-        gap: 1rem;
-
+        width: 100%;
         height: 100%;
-        align-items: center;
+
+        .nav-left {
+            gap: 1rem;
+            display: flex;
+            height: 100%;
+            align-items: center;
+            position: absolute;
+            left: 2rem;
+        }
+
+        .nav-right {
+            gap: 1rem;
+            display: flex;
+            height: 100%;
+            align-items: center;
+            position: absolute;
+            right: 2rem;
+        }
 
         .nav-item {
             font-size: 20px;
@@ -771,7 +790,8 @@ header {
 }
 
 // On mobile
-@media screen and (max-width: $device-s-width), (pointer: coarse) {
+@media screen and (max-width: $device-s-width),
+(pointer: coarse) {
     main {
         padding: 2rem 1rem 6rem;
 
@@ -792,12 +812,21 @@ header {
 
         nav {
             position: relative;
-            right: unset;
-
             display: flex;
             flex-direction: column;
             align-items: center;
+            gap: 1rem;
+
+            .nav-left, .nav-right {
+                left: unset;
+                right: unset;
+                position: relative;
+    
+                flex-direction: column;
+            }
         }
+
+     
     }
 
     .problem {
@@ -838,7 +867,8 @@ header {
     }
 }
 
-@media screen and (max-width: $device-m-width), (pointer: coarse) {
+@media screen and (max-width: $device-m-width),
+(pointer: coarse) {
     .markdown-editor {
         grid-template-columns: auto;
         grid-template-rows: auto auto;
@@ -848,4 +878,4 @@ header {
             justify-self: center;
         }
     }
-}
+}