feat(nav): add max width

src/components/nav.js

@@ -11,8 +11,6 @@ const Container = styled.div`
   right: 0;
   bottom: 0;
   left: 0;
-  display: flex;
-  flex-direction: column-reverse;
   z-index: 6;
   background-color: ${props =>
     props.open ? `rgba(0, 0, 0, 0.8)` : `rgba(0, 0, 0, 0.4)`};
@@ -24,8 +22,6 @@ const Container = styled.div`
   transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
   @media (min-width: 30em) {
     position: absolute;
-    display: flex;
-    flex-direction: row;
     bottom: auto;
     background-color: rgba(0, 0, 0, 0.6);
     transform: none;
@@ -33,6 +29,17 @@ const Container = styled.div`
   }
 `;
 
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+  height: 100%;
+  max-width: var(--theme-max-width);
+  margin: 0 auto;
+  @media (min-width: 30em) {
+    flex-direction: row;
+  }
+`;
+
 const Menu = styled.div`
   display: flex;
   justify-content: space-between;
@@ -101,6 +108,7 @@ export default function Nav({ data, open, setOpen }) {
   const handleButtonClick = () => setOpen(!open);
   return (
     <Container open={open}>
+      <Wrapper>
         <Menu>
           <Heading to="/" visible={!open}>
             <LogoArrows />
@@ -117,6 +125,7 @@ export default function Nav({ data, open, setOpen }) {
             ))}
           </List>
         </Content>
+      </Wrapper>
     </Container>
   );
 }