some more nav fiddling

scripts/nav.js

@@ -20,19 +20,21 @@ const populateNav = function() {
   if (path === "/") home.id = "current-page";
   nav.append(home);
 
-  let div = document.createElement("div");
+  let ul = document.createElement("ul");
 
   for (const item of navItems) {
+    let li = document.createElement("li");
     let a = document.createElement("a");
     a.href = item.href;
     a.innerHTML = item.title;
 
     if (item.href === path) a.id = "current-page";
 
-    div.append(a);
+    li.append(a);
+    ul.append(li);
   }
 
-  nav.append(div);
+  nav.append(ul);
 }
 
 populateNav();

styles/main.css

@@ -102,13 +102,13 @@ a:focus-visible {
 }
 
 p,
-ul {
+main ul {
   padding: .5rem;
   background-color: var(--color-alt);
   border-radius: 0 0 1rem 1rem;
 }
 
-li {
+main li {
   margin-left: 1rem;
 }
 

styles/nav.css

@@ -19,11 +19,15 @@ nav a {
   }
 }
 
-nav div {
+nav ul {
   display: flex;
   justify-content: flex-end;
 }
 
+nav li {
+  list-style: none;
+}
+
 /* this specifically handles the home button
 we want it taking up flex container space */
 nav > #current-page {