💄 style: improve header's responsiveness

Both title and navs take up 100% of the width on small displays.

Closes #48

sass/parts/_header.scss

@@ -8,7 +8,6 @@ header {
     align-items: flex-start;
     gap: 12px;
     font-size: 1.5rem;
-    /* Otherwise header and menu is too close on small screens*/
     margin-bottom: 10px;
   }
 }
@@ -108,12 +107,15 @@ header {
 }
 
 @media only screen and (max-width: 600px) {
-  .nav-title {
-    margin: 0;
+  .nav-navs {
+    margin-top: 0.8rem;
+    width: 100%;
+    justify-content: center;
   }
 
   .navbar {
-    max-width: var(--medium-layout-width);
+    flex-direction: column;
+    align-items: center;
   }
 }