hover behavior in nav bar

static/css/styles2.css

@@ -13,6 +13,11 @@
          padding: 5px;  
     }
 
+    .wrapper nav {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
     a {
         text-decoration: none;
         color: #1c75bc;
@@ -232,18 +237,30 @@
     }
 
     nav li {
-        margin: 0.2em;
+        margin: 0;
-    }
+        padding: 0.2em;
-
-    nav a {
-        color: white;
-        transition: all .2s ease-in-out;
     }
 
+    nav a,
     nav a i {
         color: white;
     }
     
+    nav li:hover,
+    nav li:hover a,
+    nav li:hover a i {
+        color: #1c75bc;
+        background: white;
+    }
+
+    .nav-active,
+    .nav-active a,
+    .nav-active a i {
+        color: #1c75bc;
+        background: white;
+    }
+
+
     
 .main-head {
     grid-area: header;

templates/newbase.html

@@ -183,7 +183,7 @@
               <i class="fas fa-clipboard-list"></i>&nbsp;Workouts
             </a>
           </li>
-          <li>
+          <li class="nav-active">
             <a href="/rowers/new_racing">
               <i class="fas fa-flag-checkered"></i>&nbsp;Racing
             </a>