create left aligned menu styling

css/style.css

@@ -361,9 +361,6 @@ button, .link-button, .logo {
   border-radius: var(--radius-xxl);
   box-shadow: var(--shadow-button);
   text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .logo {
@@ -425,16 +422,24 @@ button:visited, .link-button:visited, .logo:visited {
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--border);
+  padding: ;
   position: sticky;
   top: 0;
+  max-width: 900px;
   background: rgb(255 255 255 / 0.88);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   z-index: 100;
 }
 
+.site-header .menu-bar {
+  max-width: 900px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 1rem;
+}
+
 .desktop-nav ul,
 .mobile-menu ul {
   list-style: none;
@@ -444,7 +449,7 @@ button:visited, .link-button:visited, .logo:visited {
 
 .desktop-nav ul {
   display: flex;
-  gap: 1.25rem;
+  gap: 1rem;
 }
 
 .desktop-nav a,
@@ -575,7 +580,7 @@ button:visited, .link-button:visited, .logo:visited {
   pointer-events: auto;
 }
 
-@media (max-width: 679px) {
+@media (max-width: 579px) {
   .desktop-nav {
     display: none;
   }
@@ -585,7 +590,7 @@ button:visited, .link-button:visited, .logo:visited {
   }
 }
 
-@media (min-width: 680px) {
+@media (min-width: 580px) {
   .menu-overlay,
   .mobile-menu {
     display: none;