Trying to get the tab bar to be a nice color

But CSS hates me so it doesn't really work someone pls help

weather/client/main.css

@@ -5,7 +5,8 @@
 .header-bg > .mdl-layout__header,
 .header-bg > .mdl-layout__header-row,
 .header-bg > .mdl-layout__drawer,
-.header-bg > .mdl-layout__tab-bar {
+.header-bg > .mdl-layout__tab-bar,
+.header-bg > .mdl-layout__tab {
     background-color: #006633;
 }
 

weather/client/views/home/home.html

 <template name="home">
-    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-        <header class="mdl-layout__header">
-            <div class="mdl-layout__header-row">
+    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header header-bg">
+        <header class="mdl-layout__header header-bg">
+            <div class="mdl-layout__header-row header-bg">
                 <!-- Title -->
                 <span class="mdl-layout-title">Weather</span>
             </div>
             <!-- Tabs -->
-            <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
-                <a id="fairfax-tab-button" href="#fairfax" class="mdl-layout__tab is-active locationTab">Fairfax</a>
-                <a href="#arlington" class="mdl-layout__tab locationTab">Arlington</a>
-                <a href="#scitech" class="mdl-layout__tab locationTab">SciTech</a>
-                <a href="#korea" class="mdl-layout__tab locationTab">Mason Korea</a>
+            <div class="mdl-layout__tab-bar mdl-js-ripple-effect header-bg">
+                <a id="fairfax-tab-button" href="#fairfax" class="mdl-layout__tab is-active">Fairfax</a>
+                <a href="#arlington" class="mdl-layout__tab">Arlington</a>
+                <a href="#scitech" class="mdl-layout__tab">SciTech</a>
+                <a href="#korea" class="mdl-layout__tab">Mason Korea</a>
             </div>
         </header>
         <main class="mdl-layout__content">