From 3cc21205428ae9cff87b0eea31c9f3641c3f5bf0 Mon Sep 17 00:00:00 2001
From: paco <34928425+pacocoursey@users.noreply.github.com>
Date: Thu, 8 Oct 2020 18:57:26 -0600
Subject: [PATCH] Fix footer width

---
 components/core/Footer/Footer.tsx | 84 ++++++++++++++++---------------
 1 file changed, 43 insertions(+), 41 deletions(-)

diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index b6cccdd15..fe5d0b056 100644
--- a/components/core/Footer/Footer.tsx
+++ b/components/core/Footer/Footer.tsx
@@ -10,55 +10,57 @@ interface Props {
 
 const Footer: FC<Props> = ({ className }) => {
   const rootClassName = cn(
-    'flex flex-col p-6 md:py-12 md:flex-row bg-black text-white flex-wrap',
+    'flex flex-col p-6 md:py-12 md:flex-row flex-wrap max-w-screen-xl m-auto',
     className
   )
   return (
-    <footer className={rootClassName}>
-      <Link href="/">
-        <a className="flex flex-initial items-center md:items-start font-bold md:mr-24">
-          <span className="rounded-full border border-gray-700 mr-2">
-            <Logo />
-          </span>
-          <span>ACME</span>
-        </a>
-      </Link>
+    <div className="bg-black text-white">
+      <footer className={rootClassName}>
+        <Link href="/">
+          <a className="flex flex-initial items-center md:items-start font-bold md:mr-24">
+            <span className="rounded-full border border-gray-700 mr-2">
+              <Logo />
+            </span>
+            <span>ACME</span>
+          </a>
+        </Link>
 
-      <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
-        <li className="py-3 md:py-0 md:pb-4">
-          <Link href="/about">
-            <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-              About
-            </a>
-          </Link>
-        </li>
+        <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
+          <li className="py-3 md:py-0 md:pb-4">
+            <Link href="/about">
+              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                About
+              </a>
+            </Link>
+          </li>
 
-        <li className="py-3 md:py-0 md:pb-4">
-          <Link href="/terms">
-            <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-              Terms of Use
-            </a>
-          </Link>
-        </li>
+          <li className="py-3 md:py-0 md:pb-4">
+            <Link href="/terms">
+              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                Terms of Use
+              </a>
+            </Link>
+          </li>
 
-        <li className="py-3 md:py-0 md:pb-4">
-          <Link href="/privacy">
-            <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-              Privacy Policy
-            </a>
-          </Link>
-        </li>
-      </ul>
+          <li className="py-3 md:py-0 md:pb-4">
+            <Link href="/privacy">
+              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                Privacy Policy
+              </a>
+            </Link>
+          </li>
+        </ul>
 
-      <small className="text-base">
-        &copy; 2020 ACME, Inc. All rights reserved.
-      </small>
+        <small className="text-base">
+          &copy; 2020 ACME, Inc. All rights reserved.
+        </small>
 
-      <hr
-        className="hidden md:block mt-4 border-gray-700"
-        style={{ flexBasis: '100%', height: 0 }}
-      />
-    </footer>
+        <hr
+          className="hidden md:block mt-4 border-gray-700"
+          style={{ flexBasis: '100%', height: 0 }}
+        />
+      </footer>
+    </div>
   )
 }