Fixing desktop menu appereance

css/style.css

@@ -209,8 +209,7 @@ h3,
 h4,
 h5,
 h6,
-p,
-li {
+p {
   scroll-margin-top: 80px;
   width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch));
 }
@@ -415,7 +414,7 @@ button:active, .link-button:active, .logo:active, .desktop-nav a[aria-current="p
   color: var(--color-text-button-active);
 }
 
-button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current="page"]:hover, .mobile-menu a[aria-current="page"]:hover {
+button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current="page"]:visited, .mobile-menu a[aria-current="page"]:visited {
   color: var(--color-text-button);
   text-decoration: none;
 }
@@ -465,41 +464,46 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current
 
 .menu-bar .menu-left {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  min-height: 44px;
+  align-items: stretch;
+  gap: var(--spacing-4);
 }
 
-/* .desktop-nav {
-  height: 100%;
-  align-self: stretch;
-} */
-
 .desktop-nav {
-  flex: 1;  
+  flex: 1 1 auto;
+  display: flex;
+  align-self: stretch;
   background: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   border-radius: var(--radius-xxl);
   box-shadow: var(--shadow-button);
-  padding: var(--spacing-2);
-  height: 100%;
-}
-
-.desktop-nav ul,
-.mobile-menu ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
 }
 
 .desktop-nav ul {
   display: flex;
+  align-items: stretch;
+  width: 100%;
+  margin: 0;
+  padding: var(--spacing-2);
+  list-style: none;
   gap: var(--spacing-2);
 }
 
-/* .desktop-nav ul li {
+.desktop-nav li {
+  flex: 1 1 0;
+  display: flex;
+  align-items: stretch;
   margin: 0;
-} */
+  padding: 0;
+  list-style: none;
+}
+
+.desktop-nav .menu-button {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  white-space: nowrap;
+}
 
 .desktop-nav a[aria-current="page"],
 .mobile-menu a[aria-current="page"] {