From b684ddc8bdbfa7ba09e759b2105fb1d730dfc404 Mon Sep 17 00:00:00 2001
From: Thomas Ibarra <hello@imake.software>
Date: Wed, 31 Jul 2019 10:42:19 -0500
Subject: [PATCH] refactor(containers): clean up container styling

---
 src/components/Container/styles.tsx | 14 +-------------
 src/components/Footer/styles.tsx    |  3 ---
 src/components/Header/index.tsx     |  1 -
 src/components/Header/styles.tsx    |  5 ++---
 src/components/Layout/index.tsx     |  2 +-
 src/components/Layout/styles.tsx    | 17 +++++------------
 6 files changed, 9 insertions(+), 33 deletions(-)

diff --git a/src/components/Container/styles.tsx b/src/components/Container/styles.tsx
index 5ff5bcb..af20a32 100644
--- a/src/components/Container/styles.tsx
+++ b/src/components/Container/styles.tsx
@@ -1,16 +1,4 @@
 import styled from "styled-components"
 
 export const ContainerWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin: 20px;
-  max-width: 800px;
-
-  & > :first-child {
-    margin-top: 0;
-  }
-
-  & > :last-child {
-    margin-bottom: 0;
-  }
-`
+  `
diff --git a/src/components/Footer/styles.tsx b/src/components/Footer/styles.tsx
index 8e1f496..e73d4a5 100644
--- a/src/components/Footer/styles.tsx
+++ b/src/components/Footer/styles.tsx
@@ -2,9 +2,6 @@ import { Link } from "gatsby"
 import styled from "styled-components"
 
 export const FooterWrapper = styled.footer`
-  max-width: 840px;
-  margin: auto auto;
-
   & a {
     display: inline;
   }
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 1e326f3..8a29a81 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -17,7 +17,6 @@ export function Header() {
       <Container>
         <SC.InnerWrapper>
           <SC.Logo src={logo} />
-
           <SC.Menu>
             <MenuItem to="/about">about</MenuItem>
             <MenuItem to="/rules">rules</MenuItem>
diff --git a/src/components/Header/styles.tsx b/src/components/Header/styles.tsx
index 8ea4cee..3f4efae 100644
--- a/src/components/Header/styles.tsx
+++ b/src/components/Header/styles.tsx
@@ -2,7 +2,7 @@ import { Link } from "gatsby"
 import styled from "styled-components"
 
 export const HeaderWrapper = styled.header`
-  margin: 0 auto 20px;
+  margin-bottom: 20px;
 `
 
 export const InnerWrapper = styled.div`
@@ -21,9 +21,8 @@ export const Logo = styled.img`
 export const Menu = styled.nav`
   display: flex;
   align-items: flex-start;
-  justify-content: space-between;
+  justify-content: center;
   flex-wrap: wrap;
-  width: 100%;
 `
 
 export const MenuItem = styled(Link)`
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 1b0b186..7b384e0 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -38,8 +38,8 @@ export function Layout({ children }: PropsWithChildren<{}>) {
             {children}
           </Container>
         </SC.MainContent>
+        <Footer />
       </SC.Main>
-      <Footer />
     </Scrollbar>
   )
 }
diff --git a/src/components/Layout/styles.tsx b/src/components/Layout/styles.tsx
index a18c523..c0674eb 100644
--- a/src/components/Layout/styles.tsx
+++ b/src/components/Layout/styles.tsx
@@ -3,19 +3,12 @@ import styled from "styled-components"
 export const Main = styled.div`
   display: flex;
   flex-direction: column;
-  margin: 20px auto;
-  width: 100%;
+  align-items: center;
+  margin: 20px;
 `
 
 export const MainContent = styled.main`
-  flex: 1 0 auto;
-  margin: 0 auto;
-
-  & > :first-child {
-    margin-top: 0;
-  }
-
-  & > :last-child {
-    margin-bottom: 0;
-  }
+  display: flex;
+  justify-content: center;
+  max-width: 800px;
 `