title: Active Page not working
body: <p>Hello I am terribly sorry for the 'easy' question, it's just that I did this verbatim from the website and so I must be missing something painfully obvious. Ok so I have an <code>li</code> list and I want the first one to be yellow and the other elements to be white. I have for one of my rules in the real project <code>li a { color: white</code> but I am pretty sure that this specific class should override that rule, no? Any help would be appreciated, thanks.</p>
  
  <pre><code> <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.active{
   color: yellow;
  }
  
  
  #subnav {
   height: 10%;
   text-align: center;
  }
  
  #subnav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: green;
   text-align: center;
   width: 100%;
   font-weight: bold;
   
  }
  
  #subnav li {
      display: inline-block;
  }
  
  #subnav li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  
  #subnav li a:hover {
     color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="subnav"&gt;
  
  
  &lt;ul&gt; 
   
  
          &lt;li&gt; &lt;a class="active" href="#overview"&gt;Overview &lt;/a&gt;&lt;/li&gt;
           
  
  
  
        &lt;/ul&gt;
  
    &lt;/div&gt;
  
   </code></pre>
  </div>
  </div>
  
  </code></pre>