Fix breadcrumb and header display

     margin-top: .25em; }
 
 .breadcrumbs {
-    font-size: .8em; }
+    display: table;
+    font-size: .8em;
+    margin-left: -.25em; }
+.breadcrumbs a {
+    display: inline-block;
+    padding: .5em .25em; }
 .crumb-sep {
-    color: #777;
+    color: #586e75;
     font-size: .8em;
     position: relative;
     top: -.1em; }

 h1 {
     font-size: 4em;
     line-height: .8;
-    margin: 0; }
+    margin: .2em 0 .4em 0; }
 h1 span {
     font-family: cursive; }
 body > nav .h-card p {

     <nav class=breadcrumbs>$:render_breadcrumbs(breadcrumbs, path)</nav>
 $if "title" in resource:
     $if getattr(resource, "show_title", True):
-        <header>
         <h1
         $if "title_classes" in resource:
              class="$' '.join(resource.title_classes)"\
         >$:resource.title</h1>
-        </header>
 $:resource
 $# $if "hide_footer" not in resource:
 $#     <footer>