Code review fixes

components/Sections.module.css

@@ -1,7 +1,6 @@
 .sections {
   display: flex;
   flex-direction: row;
-  min-width: calc(1000rem / 16);
   gap: calc(15rem / 16);
 }
 
@@ -25,30 +24,36 @@
   flex-direction: column;
 }
 
-.navItem {
+.nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav li {
   margin: calc(20rem / 16);
   margin-left: 0;
 }
 
-.navItem:first-child {
+.nav li:first-child {
   margin-top: calc(10rem / 16);
 }
 
-.nav h4 {
+.nav li .linkNumber {
   color: var(--secondary-accent);
   margin: 0;
   display: inline;
 }
 
-.nav a {
+.nav li a {
   color: var(--primary-text);
 }
 
-.nav a:hover p {
+.nav li a:hover .linkName {
   text-decoration: underline;
 }
 
-.nav p {
+.nav li .linkName {
   margin: 0;
   display: inline;
 }

components/Sections.tsx

@@ -25,16 +25,20 @@ export function Sections({ data, showHeader = true }: SectionsProps) {
         ""
       )}
       <nav className={styles.nav}>
+        <ul>
           {data.map((datum, index) => {
             return (
-            <div key={`${datum.name}-${index}`} className={styles.navItem}>
+              <li key={`${datum.name}-${index}`}>
                 <a href={datum.url}>
-                <h4>{String(index).padStart(2, "0")} </h4>
+                  <span className={styles.linkNumber}>
-                <p>{datum.name}</p>
+                    {String(index).padStart(2, "0")}{" "}
+                  </span>
+                  <span className={styles.linkName}>{datum.name}</span>
                 </a>
-            </div>
+              </li>
             );
           })}
+        </ul>
       </nav>
     </section>
   );