From 5ce869d4d136e15eb4fdc0d98d7363da8ca19842 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Wed, 29 Jul 2020 14:33:37 -0700
Subject: [PATCH] chore: use grid-column-gap instead of padding to add gap
 between layout elements

---
 src/components/RelatedContent.js | 11 +----------
 src/layouts/MainLayout.js        |  4 ++--
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/RelatedContent.js b/src/components/RelatedContent.js
index e95a36e0c..9f0b7edbd 100644
--- a/src/components/RelatedContent.js
+++ b/src/components/RelatedContent.js
@@ -12,26 +12,17 @@ const RelatedContent = ({ className }) => {
         siteMetadata {
           repository
         }
-        layout {
-          contentPadding
-        }
       }
     }
   `);
   const { fileRelativePath } = useContext(PageContext);
 
   const {
-    layout,
     siteMetadata: { repository },
   } = site;
 
   return (
-    <aside
-      className={className}
-      css={css`
-        padding: 0 ${layout.contentPadding};
-      `}
-    >
+    <aside className={className}>
       <h4>Contribute</h4>
       <Button
         as={ExternalLink}
diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js
index 82549272c..df3a14d85 100644
--- a/src/layouts/MainLayout.js
+++ b/src/layouts/MainLayout.js
@@ -90,6 +90,7 @@ const MainLayout = ({ children }) => {
             'sidebar content related-content'
             'sidebar footer footer';
           grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 340px;
+          grid-column-gap: ${layout.contentPadding};
           width: 100%;
           max-width: ${layout.maxWidth};
           margin: 0 auto;
@@ -122,7 +123,7 @@ const MainLayout = ({ children }) => {
         <article
           css={css`
             grid-area: content;
-            padding: ${layout.contentPadding};
+            padding: ${layout.contentPadding} 0;
           `}
         >
           {children}
@@ -140,7 +141,6 @@ const MainLayout = ({ children }) => {
             grid-area: footer;
             border-top: 1px solid var(--divider-color);
             padding: ${layout.contentPadding} 0;
-            margin-left: ${layout.contentPadding};
           `}
         />
       </div>