Add: create a widthContainer in Layout.module.css that is used to define all components width

Author: rebecatschiedel

components/Footer.js

@@ -1,11 +1,14 @@
 import Link from "next/link";
 import footerStyles from "../styles/Footer.module.css";
+import layoutStyles from "../styles/Layout.module.css";
 import { linksNav, linksSocial } from "../utils/links";
 
 export default function Footer() {
   return (
     <footer className={footerStyles.footer}>
-      <div className={footerStyles.container}>
+      <div
+        className={`${layoutStyles.widthContainer} ${footerStyles.container}`}
+      >
         <div className={footerStyles.columnLeft}>
           <ul className={footerStyles.footerList}>
             {linksNav.map((link) => (
@@ -47,7 +50,7 @@ export default function Footer() {
           </div>
         </div>
       </div>
-      <p className={footerStyles.copyright}>
+      <p className={`${layoutStyles.widthContainer} ${footerStyles.copyright}`}>
         Web Dev Path 2021. All rights reserved.
       </p>
     </footer>

components/Layout.js

@@ -6,7 +6,7 @@ export default function Layout({ children }) {
   return (
     <>
       <Nav />
-      <div className={styles.container}>
+      <div className={`${styles.widthContainer} ${styles.container}`}>
         <main className={styles.main}>{children}</main>
       </div>
       <Footer />

components/Nav.js

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import styles from "../styles/Nav.module.css";
+import layoutStyles from "../styles/Layout.module.css";
 
 export default function Nav() {
   const [active, setActive] = useState(false);
@@ -21,7 +22,9 @@ export default function Nav() {
 
   return (
     <header className={styles.header}>
-      <div className={`${styles.navContainer} ${styles.row}`}>
+      <div
+        className={`${styles.navContainer} ${styles.row} ${layoutStyles.widthContainer}`}
+      >
         <div className={styles.align}>
           <Link href="/">
             <img

styles/Footer.module.css

@@ -76,7 +76,6 @@
 
 @media (min-width: 578px) {
   .container {
-    max-width: 800px;
     margin: 0 auto;
     display: flex;
     flex-direction: row;
@@ -122,10 +121,7 @@
   }
 
   .copyright {
-    max-width: 800px;
-    margin: 0 auto;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+    margin: 1rem auto;
     text-align: left;
   }
 }

styles/Home.module.css

@@ -39,7 +39,6 @@
   justify-content: center;
   flex-wrap: wrap;
 
-  max-width: 800px;
   margin-top: 3rem;
 }
 

styles/Layout.module.css

@@ -1,3 +1,8 @@
+.widthContainer {
+  max-width: 80%;
+  margin: 0 auto;
+}
+
 .container {
   min-height: 100vh;
   padding: 0 0.5rem;

styles/Nav.module.css

@@ -1,7 +1,5 @@
 .navContainer {
   width: 80%;
-  max-width: 800px;
-  margin: 0 auto;
   position: relative;
 }