From 2fc961725ab670107064fbbf7054904978e5c777 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Thu, 31 May 2018 19:07:11 -0400
Subject: [PATCH] Updating Header styles to allow right-hand items to reflow

---
 src/components/Header/style.css | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Header/style.css b/src/components/Header/style.css
index d7f5736..a8d5dc9 100644
--- a/src/components/Header/style.css
+++ b/src/components/Header/style.css
@@ -1,6 +1,8 @@
 @import url('../../globals.css');
 
 .header {
+  display: flex;
+  align-items: center;
   background: var(--color-green) var(--gradient-green);
   box-shadow: 0 0 1rem color(var(--color-black) alpha(0.7));
   padding: 0 var(--content-margin);
@@ -25,6 +27,7 @@
   }
 
   & h1 {
+    flex-grow: 1;
     font-family: 'Bangers', 'cursive';
     font-size: 4rem;
     font-weight: normal;
@@ -41,13 +44,12 @@
 
   & ul {
     @apply --inline-list;
-    line-height: var(--header-height);
-    position: absolute;
-    top: 0;
-    right: var(--content-margin);
+    text-align: right;
   }
 
   & li {
+    margin-left: 1em;
+
     & a:hover,
     & a:active {
       text-decoration: underline;