Fix up banner on small screen

Author: knolleary

css/style.css

@@ -47,6 +47,7 @@ dd {
 
 /**** HEADER ****/
 .header {
+    position: relative;
     font-family: "Roboto Slab";
     font-size: 20px;
     line-height: 50px;
@@ -126,21 +127,22 @@ dd {
 .banner {
     font-family: "Roboto Slab";
     font-size: 16px;
-    line-height: 50px;
     padding: 0px 10px;
     min-height: 50px;
     background: #333;
     border-bottom: 1px solid #eee;
-    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 .banner-content {
-    width: 100%;
-	max-width: 1155px;
-	min-width: 755px;
 	margin: 0 auto;
-    color: #fff;
+    color: #fff;   
+}
+.banner-content span {
+    margin: 0 4px;
 }
-
 /**** END HEADER ****/
 
 .footer {
@@ -306,5 +308,6 @@ dd {
 
     .banner-content {
         min-width: 0;
+        font-size: 0.8em
     }
 }