Center header below a certain size

1 files changed, 11 insertions, 8 deletions

diff --git a/src/components/header.js b/src/components/header.js
index a390b67..6e1c857 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -3,21 +3,24 @@ import { css } from 'react-emotion'
 import { Link } from 'gatsby'
 import { Nav } from './nav'
 import { Social } from './social'
-import { margins } from './globals'
+import { margins, breakpoints } from './globals'
 
-const headerStyle = css(`
+const headerStyle = css`
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   flex-wrap: wrap;
-`)
+  @media (min-width: ${breakpoints[0].breakpoint}px) {
+    justify-content: space-between;
+  }
+`
 
-const headerLinkStyle = css(`
+const headerLinkStyle = css`
   border: none;
-`)
+`
 
-const headerLeftStyle = css(`
+const headerLeftStyle = css`
   margin: 0 0 ${margins.md}px 0;
-`)
+`
 
 export const Header = p => (
   <header className={headerStyle}>