Use semantic HTML & add margin to header

1 files changed, 8 insertions, 3 deletions

diff --git a/src/components/header.js b/src/components/header.js
index 48b7c91..2ea153e 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -3,6 +3,7 @@ import { css } from 'emotion'
 import { Link } from 'gatsby'
 import { Nav } from './nav'
 import { Social } from './social'
+import { margins } from './globals'
 
 const headerStyle = css(`
   display: flex;
@@ -14,9 +15,13 @@ const headerLinkStyle = css(`
   border: none;
 `)
 
+const headerLeftStyle = css(`
+  margin: 0 0 ${margins.md}px 0;
+`)
+
 export const Header = p => (
-  <div className={headerStyle}>
-    <div>
+  <header className={headerStyle}>
+    <div className={headerLeftStyle}>
       <h1>
         <Link to="/" className={headerLinkStyle}>
           {p.siteName}
@@ -25,5 +30,5 @@ export const Header = p => (
       <Social socialEntries={p.socialEntries} />
     </div>
     <Nav links={p.links} />
-  </div>
+  </header>
 )