feat: Spacing and sizing layout tweaks

src/components/Footer.module.scss

@@ -4,7 +4,6 @@
   background-color: var(--color-neutrals-800);
   color: var(--footer-text-color);
   padding: 1.5rem 0;
-  margin-top: 10rem;
 }
 
 .leftColumn {

src/components/Layout.js

@@ -9,14 +9,14 @@ import pages from '../data/sidenav.json';
 import './styles.scss';
 
 const Layout = ({ children }) => (
-  <>
+  <div className={styles.layout}>
     <Header />
-    <div className={styles.layout}>
+    <div className={styles.main}>
       <Sidebar pages={pages} />
-      <main>{children}</main>
+      <main className={styles.content}>{children}</main>
     </div>
     <Footer pages={pages} />
-  </>
+  </div>
 );
 
 Layout.propTypes = {

src/components/Layout.module.scss

@@ -1,8 +1,16 @@
 .layout {
   min-height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+
+.main {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
-  grid-gap: 1rem;
-  max-width: 1200px;
+  max-width: 1460px;
   margin: 0 auto;
 }
+
+.content {
+  padding: 2rem;
+}

src/components/Sidebar.module.scss

@@ -1,5 +1,5 @@
 .sidebar {
-  padding: 2rem 0;
+  padding: 2rem;
   border-right: 1px solid var(--color-neutrals-100);
 
   ul {