Align nav with content on md+

Author: lofcz

_includes/logo.html

@@ -1,4 +1,4 @@
-<h1 class="noBorder noMargin">
+<h1 class="noBorder noMargin logoHeading">
     <a href="/" class="site-title m10sm">
         <picture>
             <source srcset="/assets/images/wattle-logo-dark.svg" media="(prefers-color-scheme: dark)">

_includes/nav.html

@@ -1,4 +1,4 @@
- <ul id="navUl">
+ <ul class="navUl" id="navUl">
     <li class="renderOnSm">
         <input id="menutoggle" class="menucheck" type="checkbox" onclick="toggleNav()">
         <label for="menutoggle" class="menutext">Menu</label>

assets/css/main.css

@@ -50,15 +50,16 @@ nav {
     width: 100%;
     border-top: 1px solid var(--navBorder);
     border-bottom: 1px solid var(--navBorder);
+    background: var(--navBg);
 }
 
 nav ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
-    background: var(--navBg);
     line-height: 1.15;
+    background: var(--navBg);
 }
 
 nav ul li:not(.renderOnSm) {
@@ -212,6 +213,19 @@ pre.highlight code {
     #contentwrap {
         max-width: 980px;
     }
+
+    nav ul {
+        max-width: calc(980px + 32px);
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .logoHeading {
+        display: flex;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: calc(980px + 32px);
+    }
 }
 
 @media screen and (max-width: 980px) {
@@ -225,6 +239,7 @@ pre.highlight code {
     }
     nav {
         max-height: 48px;
+        background: var(--navBg);
     }
     nav ul {
         position: relative;