diff --git a/404.html b/404.html
index 670139b0..881353c0 100644
--- a/404.html
+++ b/404.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/about/index.html b/about/index.html
index 1ff2f808..e742c160 100644
--- a/about/index.html
+++ b/about/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/accessibility/index.html b/accessibility/index.html
index cac0c7e1..9a86d70b 100644
--- a/accessibility/index.html
+++ b/accessibility/index.html
@@ -129,15 +129,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -201,6 +199,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/100-days-of-code/index.html b/blog/categories/100-days-of-code/index.html
index e0b3a6b0..be410360 100644
--- a/blog/categories/100-days-of-code/index.html
+++ b/blog/categories/100-days-of-code/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/about-this-blog/index.html b/blog/categories/about-this-blog/index.html
index 91bbf43c..ad94c9c3 100644
--- a/blog/categories/about-this-blog/index.html
+++ b/blog/categories/about-this-blog/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/about-this-website/index.html b/blog/categories/about-this-website/index.html
index 359d3e52..fbb2b5ee 100644
--- a/blog/categories/about-this-website/index.html
+++ b/blog/categories/about-this-website/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/cassette-beasts/index.html b/blog/categories/cassette-beasts/index.html
index b9d221f4..10b53ba2 100644
--- a/blog/categories/cassette-beasts/index.html
+++ b/blog/categories/cassette-beasts/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/cbpickaxe/index.html b/blog/categories/cbpickaxe/index.html
index 3c0e2cff..20db4bb9 100644
--- a/blog/categories/cbpickaxe/index.html
+++ b/blog/categories/cbpickaxe/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/chingu/index.html b/blog/categories/chingu/index.html
index fe0b09c5..ab53da6a 100644
--- a/blog/categories/chingu/index.html
+++ b/blog/categories/chingu/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/cs50/index.html b/blog/categories/cs50/index.html
index 7d95eaf4..35134e5e 100644
--- a/blog/categories/cs50/index.html
+++ b/blog/categories/cs50/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/cs50x/index.html b/blog/categories/cs50x/index.html
index 53c3dca3..8308746e 100644
--- a/blog/categories/cs50x/index.html
+++ b/blog/categories/cs50x/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/css/index.html b/blog/categories/css/index.html
index 0b5d3783..6174b2e1 100644
--- a/blog/categories/css/index.html
+++ b/blog/categories/css/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/eleventy/index.html b/blog/categories/eleventy/index.html
index 785cd789..70e5900f 100644
--- a/blog/categories/eleventy/index.html
+++ b/blog/categories/eleventy/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/flask/index.html b/blog/categories/flask/index.html
index 3002b72e..d91b8023 100644
--- a/blog/categories/flask/index.html
+++ b/blog/categories/flask/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/freecodecamp/index.html b/blog/categories/freecodecamp/index.html
index 38e93a5b..5419b1f9 100644
--- a/blog/categories/freecodecamp/index.html
+++ b/blog/categories/freecodecamp/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/github-pages/index.html b/blog/categories/github-pages/index.html
index 548d18f7..cf5570de 100644
--- a/blog/categories/github-pages/index.html
+++ b/blog/categories/github-pages/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/github/index.html b/blog/categories/github/index.html
index f724c4c7..f0c1e91b 100644
--- a/blog/categories/github/index.html
+++ b/blog/categories/github/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/html/index.html b/blog/categories/html/index.html
index a560daf6..a8fdfbee 100644
--- a/blog/categories/html/index.html
+++ b/blog/categories/html/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/index.html b/blog/categories/index.html
index 5e4867cb..2010efed 100644
--- a/blog/categories/index.html
+++ b/blog/categories/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/javascript/index.html b/blog/categories/javascript/index.html
index d2b7db8c..78d1f650 100644
--- a/blog/categories/javascript/index.html
+++ b/blog/categories/javascript/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/javascriptmas/index.html b/blog/categories/javascriptmas/index.html
index 3d73b980..01121d1f 100644
--- a/blog/categories/javascriptmas/index.html
+++ b/blog/categories/javascriptmas/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/python/index.html b/blog/categories/python/index.html
index 1fb65c7e..69d030dc 100644
--- a/blog/categories/python/index.html
+++ b/blog/categories/python/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/react/index.html b/blog/categories/react/index.html
index 12698cbd..8a6a54b5 100644
--- a/blog/categories/react/index.html
+++ b/blog/categories/react/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/scrimba/index.html b/blog/categories/scrimba/index.html
index b0b14b96..e3604c98 100644
--- a/blog/categories/scrimba/index.html
+++ b/blog/categories/scrimba/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/categories/sql/index.html b/blog/categories/sql/index.html
index c599458a..d75fa821 100644
--- a/blog/categories/sql/index.html
+++ b/blog/categories/sql/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/index.html b/blog/index.html
index 8953f26a..2981b0d3 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/1/index.html b/blog/posts/1/index.html
index 5e41ab83..2143d76a 100644
--- a/blog/posts/1/index.html
+++ b/blog/posts/1/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html b/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
index 299f68e6..561e2850 100644
--- a/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
+++ b/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html b/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
index 2e629383..a9178477 100644
--- a/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
+++ b/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html b/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
index 1029ddf1..ca180201 100644
--- a/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
+++ b/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html b/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
index ccb3df40..0493acc1 100644
--- a/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
+++ b/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/2023-11-13-My-First-PR-in-Python/index.html b/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
index 34eaf4db..ff8d03ff 100644
--- a/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
+++ b/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html b/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
index 465db907..df0ab3aa 100644
--- a/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
+++ b/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html b/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
index 5d385dfe..c92afc47 100644
--- a/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
+++ b/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html b/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html
index df65da05..eb36dafd 100644
--- a/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html
+++ b/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html b/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html
index 45cfd838..b835fc9f 100644
--- a/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html
+++ b/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/2024-04-15-cs50x-week-9-completed/index.html b/blog/posts/2024-04-15-cs50x-week-9-completed/index.html
index 0fb8013b..f4b42773 100644
--- a/blog/posts/2024-04-15-cs50x-week-9-completed/index.html
+++ b/blog/posts/2024-04-15-cs50x-week-9-completed/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/2024-04-22-now-page-for-my-website/index.html b/blog/posts/2024-04-22-now-page-for-my-website/index.html
index 65acc1eb..06034886 100644
--- a/blog/posts/2024-04-22-now-page-for-my-website/index.html
+++ b/blog/posts/2024-04-22-now-page-for-my-website/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/2024-05-27-cs50x-course-completed/index.html b/blog/posts/2024-05-27-cs50x-course-completed/index.html
index bec1ef74..337a8b8f 100644
--- a/blog/posts/2024-05-27-cs50x-course-completed/index.html
+++ b/blog/posts/2024-05-27-cs50x-course-completed/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html b/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html
index 846baf73..b5be69c8 100644
--- a/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html
+++ b/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html b/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html
index c7454293..297a3841 100644
--- a/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html
+++ b/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/blog/posts/index.html b/blog/posts/index.html
index 6bf46b45..7b5995b7 100644
--- a/blog/posts/index.html
+++ b/blog/posts/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/colophon/index.html b/colophon/index.html
index bcc5df5a..0eae324a 100644
--- a/colophon/index.html
+++ b/colophon/index.html
@@ -129,15 +129,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -201,6 +199,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/contact/index.html b/contact/index.html
index 04db6e29..4757ffb9 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/index.html b/index.html
index 1aebf85d..6f0cd6a2 100644
--- a/index.html
+++ b/index.html
@@ -129,15 +129,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -201,6 +199,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/now/index.html b/now/index.html
index 94b3c0b8..1bb83ad9 100644
--- a/now/index.html
+++ b/now/index.html
@@ -129,15 +129,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -201,6 +199,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/projects/frontend-mentor/index.html b/projects/frontend-mentor/index.html
index 26d0dc31..bf8383ca 100644
--- a/projects/frontend-mentor/index.html
+++ b/projects/frontend-mentor/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/projects/index.html b/projects/index.html
index fa3ba0e7..b299d485 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/projects/quizzical/index.html b/projects/quizzical/index.html
index f75f24ad..8d270a03 100644
--- a/projects/quizzical/index.html
+++ b/projects/quizzical/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/projects/recipe-hub/index.html b/projects/recipe-hub/index.html
index e50cbc8b..4bcb086c 100644
--- a/projects/recipe-hub/index.html
+++ b/projects/recipe-hub/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/projects/scrimba/index.html b/projects/scrimba/index.html
index e9938943..ffc083de 100644
--- a/projects/scrimba/index.html
+++ b/projects/scrimba/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;
diff --git a/projects/tenzies/index.html b/projects/tenzies/index.html
index 9ec94210..bbe36b0c 100644
--- a/projects/tenzies/index.html
+++ b/projects/tenzies/index.html
@@ -126,15 +126,13 @@ <h2 class="visually-hidden">Navigation Links</h2>
     .header__links {
         list-style: none;
         padding-left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        gap: 1.5rem;
 
-        flex-direction: column;
+        display: grid;
         position: fixed;
         background-color: var(--clr-white);
         top: 5rem;
@@ -198,6 +196,8 @@ <h2 class="visually-hidden">Navigation Links</h2>
         }
 
         .header__links {
+            display: flex;
+            flex-wrap: wrap;
             flex-direction: row;
             position: static;
             background-color: inherit;