New button design.

_includes/header.html

@@ -2,9 +2,7 @@
     <nav class="header-nav">
         <ul class="header-list">
             {% for link in header.links %}
-                <li>
                 <a href="{{ link.url }}">{{ link.name }}</a>
-                </li>
             {% endfor %}
         </ul>
     </nav>

styling/header.css

@@ -11,7 +11,7 @@
     align-items: stretch;
 }
 
-.header-list > li {
+.header-list > a {
     flex-basis: 75px;
     /* flex-wrap: nowrap; */
     /* flex-grow: 1; */
@@ -22,12 +22,12 @@
     transition: background 0.25s linear, color 0.25s linear;
 }
 
-.header-list > li:hover, .header-list > li:focus {
+.header-list > a:hover, .header-list > a:focus {
     background: #37a4a1;
 }
 
 
-.header-list > li:not(:last-child) {
+.header-list > a:not(:last-child) {
     margin-right: 30px;
 }
 
@@ -56,11 +56,11 @@
 }
 
 @media screen and (max-width: 600px) {
-    .header-list > li {
+    .header-list > a {
         display: block;
     }
 
-    .header-list > li:not(:last-child) {
+    .header-list > a:not(:last-child) {
         margin-bottom: 15px;
     }
 }