use a flexbox for the header sections

this is better than a float because I have always kind of hated how
floating divs work, and this also orders and displays the navs better in
elinks

incorporealcms/static/css/dark.css

@@ -28,12 +28,15 @@ a:hover, a:active {
     border-bottom: 1px dotted #EEE;
 }
 
-div.nav, div.styles {
-    color: #BBB;
+div.header {
     background: #222;
     border-bottom: 1px solid #222;
 }
 
+div.nav, div.styles {
+    color: #BBB;
+}
+
 div.nav a, div.styles a {
     color: #BBB;
 }

incorporealcms/static/css/light.css

@@ -28,12 +28,15 @@ a:hover, a:active {
     border-bottom: 1px dotted #111;
 }
 
-div.nav, div.styles {
-    color: #666;
+div.header {
     background: #EEE;
     border-bottom: 1px solid #CCC;
 }
 
+div.nav, div.styles {
+    color: #666;
+}
+
 div.nav a, div.styles a {
     color: #666;
 }

incorporealcms/static/css/style.css

@@ -63,9 +63,13 @@ a:active {
     text-decoration: none;
 }
 
+div.header {
+    display: flex;
+    justify-content: space-between;
+}
+
 div.nav, div.styles {
     font-size: 0.75em;
-    border-bottom: 1px solid #444;
     padding: 0.25em 0.5em;
 }
 
@@ -73,10 +77,6 @@ div.nav a, div.styles a {
     border-bottom: none;
 }
 
-div.styles {
-    float: right;
-}
-
 div.content {
     font-size: 11pt;
 

incorporealcms/templates/base.html

@@ -11,16 +11,18 @@
 <link rel="icon" href="{{ url_for('static', filename='img/favicon.png') }}">
 
 <div class="site-wrap">
-    <div class="styles">
-        <a href="?style=dark">[dark]</a>
-        <a href="?style=light">[light]</a>
-    </div>
+    <div class="header">
         <div class="nav">
             {% for nav in navs %}
             <a href="{{ nav.1 }}">{{ nav.0 }}</a>
             {% if not loop.last %} &raquo; {% endif %}
             {% endfor %}
         </div>
+        <div class="styles">
+            <a href="?style=dark">[dark]</a>
+            <a href="?style=light">[light]</a>
+        </div>
+    </div>
     <div class="content">
         {{ content }}
     </div>