fix: correcting cancel icon tags + correcting header links struture

Author: Gallections

src/components/constants.js

@@ -55,9 +55,11 @@ export const Col = styled.div`
   display: flex;
   flex-direction: column;
 `;
-export const Center = styled.div`
+
+//
+export const Center = styled.li`
   display: flex;
-  justify-content: center;
+  justify-content: center; 
 `;
 
 export const Projects = [

src/components/header.jsx

@@ -36,17 +36,11 @@ export default function Header() {
 
       <NavBar.Links ref={drawerRef} openDrawer={openDrawer}>
         {links.map((l) => (
+          <NavBar.li>
             <Link to={l.link}>
               <NavBar.Link>{l.name}</NavBar.Link>
             </Link>
-
-
-          // The below code works but needs to ensure style consistency
-          // <li key={l.name}>
-          // <Link to={l.link}>
-          //   {l.name}
-          // </Link>
-          // </li>
+          </NavBar.li>
         ))}
         <Center>
           <CancelImageStyle
@@ -109,14 +103,20 @@ const NavBar = {
         openDrawer ? `translateX(0)` : `translateX(100%)`};
     }
   `,
-  Link: styled.li`
+  Link: styled.span`
     padding: 0 1rem;
     cursor: pointer;
 
     @media only screen and (max-width: 600px) {
       padding: 1rem 0;
     }
   `,
+  li: styled.li`
+    cursor: pointer;
+
+    @media only screen and (max-width: 600px) {
+      padding: 1rem 0;
+    }`
 };
 
 const CancelImageStyle = styled.img`