diff --git a/src/_includes/base.njk b/src/_includes/base.njk
index bf2fd63..5707192 100644
--- a/src/_includes/base.njk
+++ b/src/_includes/base.njk
@@ -41,23 +41,23 @@
 		{% ogImage "./src/_includes/components/ogImage.njk", { title: pageTitle or title, subTitle: description } %}
 	</head>
 	<body>
-		<header class="wrapper-lg row space-between">
+		<header>
 			<a href="/" class="site-title">LD</a>
+			<div class="nav-container wrapper-lg row space-between w-full">
+					<nav>
+						<ul class="row" role='list'>
+							<li><a href="/">Home</a></li>
+							<li><a href="/blog">Blog</a></li>
+							<li><a href="/blogroll">Blogroll</a></li>
+							<li><a href="/events/2024">Events</a></li>
+							<li><a href="/links">Links</a></li>
+						</ul>
+					</nav>
 
-			<nav>
-				<ul class="row" role='list'>
-					<li><a href="/">Home</a></li>
-					<li><a href="/blog">Blog</a></li>
-					<li><a href="/blogroll">Blogroll</a></li>
-					<li><a href="/events/2024">Events</a></li>
-					<li><a href="/links">Links</a></li>
-				</ul>
-			</nav>
-
-			<a href="/feed/" class="rss" aria-label="RSS feed">
-				<i class="fa-solid fa-rss"></i>
-			</a>
-
+					<a href="/feed/" class="rss" aria-label="RSS feed">
+						<i class="fa-solid fa-rss"></i>
+					</a>
+			</div>
 			<fieldset class="color-scheme">
 				<legend>Change your colour scheme</legend>
 				<label>
diff --git a/src/css/exceptions/color-scheme-picker.css b/src/css/exceptions/color-scheme-picker.css
index e110bbb..f965cf5 100644
--- a/src/css/exceptions/color-scheme-picker.css
+++ b/src/css/exceptions/color-scheme-picker.css
@@ -1,15 +1,13 @@
-header > * {
-	flex-grow: 1;
-}
 
 .color-scheme {
 	border: 0;
 	padding: 0;
 	display: flex;
 	gap: var(--space-size-xs);
-	flex-grow: 1;
-	justify-content: center;
-	justify-self: flex-end;
+	grid-column: auto/span 2;
+	justify-content: end;
+	width: 100%;
+	--grid-item-size: 20rem;
 
 	legend {
 		position:absolute;
diff --git a/src/css/exceptions/nav-container.css b/src/css/exceptions/nav-container.css
new file mode 100644
index 0000000..46a623f
--- /dev/null
+++ b/src/css/exceptions/nav-container.css
@@ -0,0 +1,4 @@
+.nav-container {
+    --grid-item-size: clamp(30rem, 70vw, var(--screen-lg));
+    grid-column: auto / span 4;
+}
\ No newline at end of file
diff --git a/src/css/exceptions/site-title.css b/src/css/exceptions/site-title.css
index 9ff090b..b2a4726 100644
--- a/src/css/exceptions/site-title.css
+++ b/src/css/exceptions/site-title.css
@@ -3,6 +3,7 @@
   letter-spacing: clamp(-0.2rem,1vw,-0.5rem);
   line-height: 1;
   text-decoration: none;
+  place-self: start;
 
   &:hover, &:focus, &:focus-visible {
     outline: 0px transparent;
diff --git a/src/css/globals.css b/src/css/globals.css
index 59bbdb4..469de87 100644
--- a/src/css/globals.css
+++ b/src/css/globals.css
@@ -153,12 +153,13 @@ nav {
 }
 
 header {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding-top: var(--space-size-s);
-    padding-bottom: var(--space-size-s);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-size, 10rem), 1fr));
+    grid-gap: 10px;
+    padding: var(--space-size-m);
+    place-items: center;
+    justify-content: center;
+    width: 100%;
 }
 
 p {
diff --git a/src/css/utilities/flex.css b/src/css/utilities/flex.css
index d4b712c..8987924 100644
--- a/src/css/utilities/flex.css
+++ b/src/css/utilities/flex.css
@@ -1,3 +1,7 @@
 .space-between {
   justify-content: space-between;
 }
+
+.space-around {
+  justify-content: space-around;
+}
