Fix: Css structure

Author: rebecatschiedel

pages/index.js

@@ -8,47 +8,43 @@ export default function Home() {
         <title>Web Dev Path</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main>
-        <h1 className={styles.title}>&lt; Web Dev wannabe? /&gt;</h1>
-        <div className={styles.description}>
-          <p>
-            Hold our hand and enjoy the road to learn how to start a new
-            project, the magic behind Github while working in a team
-            environment, and much more...
-          </p>
-        </div>
-        <hr className={styles.divider} />
+      <h1 className={styles.title}>&lt; Web Dev wannabe? /&gt;</h1>
+      <div className={styles.description}>
+        <p>
+          Hold our hand and enjoy the road to learn how to start a new project,
+          the magic behind Github while working in a team environment, and much
+          more...
+        </p>
+      </div>
+      <hr className={styles.divider} />
 
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h3>Documentation &rarr;</h3>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
+      <div className={styles.grid}>
+        <a href="https://nextjs.org/docs" className={styles.card}>
+          <h3>Documentation &rarr;</h3>
+          <p>Find in-depth information about Next.js features and API.</p>
+        </a>
 
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h3>Learn &rarr;</h3>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
+        <a href="https://nextjs.org/learn" className={styles.card}>
+          <h3>Learn &rarr;</h3>
+          <p>Learn about Next.js in an interactive course with quizzes!</p>
+        </a>
 
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h3>Examples &rarr;</h3>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
+        <a
+          href="https://github.com/vercel/next.js/tree/master/examples"
+          className={styles.card}
+        >
+          <h3>Examples &rarr;</h3>
+          <p>Discover and deploy boilerplate example Next.js projects.</p>
+        </a>
 
-          <a
-            href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h3>Deploy &rarr;</h3>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
+        <a
+          href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+          className={styles.card}
+        >
+          <h3>Deploy &rarr;</h3>
+          <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
+        </a>
+      </div>
     </div>
   );
 }

styles/Footer.module.css

@@ -17,11 +17,6 @@
   align-items: center;
 }
 
-.a {
-  color: inherit;
-  text-decoration: none;
-}
-
 /* code {
   background: #fafafa;
   border-radius: 5px;

styles/Home.module.css

@@ -32,6 +32,7 @@
   max-width: 700px;
   padding: 0 1rem;
 }
+
 .grid {
   display: flex;
   align-items: center;

styles/globals.css

@@ -6,6 +6,11 @@ body {
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
+.a {
+  color: inherit;
+  text-decoration: none;
+}
+
 * {
   box-sizing: border-box;
 }