title: Active class in CSS
body: <p>For some reason the active class doesn't have any effect on my page. Would be very grateful for someone to take a peek and explain why it doesn't.</p>
  
  <p><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>.nav-item {
    display: inline;
    list-style: none;
    margin-left: 40px;
  }
  
  .nav-item a {
    font-size: 30px;
    text-decoration: none;
    color: white;
  }
  
  .nav-item a:hover,
  .active {
    color: #f3ef36;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header id="header"&gt;
    &lt;nav&gt;
      &lt;ul class="nav"&gt;
        &lt;li class="nav-item"&gt;&lt;a class="active" href="#"&gt;Hem&lt;/a&gt;&lt;/li&gt;
        &lt;li class="nav-item"&gt;&lt;a href="meny.html"&gt;Meny&lt;/a&gt;&lt;/li&gt;
        &lt;li class="nav-item"&gt;&lt;a href="kontakt.html"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>From the examples I've checked on w3schools and others it should work fine, but for some reason the active class doesn't seem to bite in this context. The hover pseudoclass works but not the active class I've manually typed in the different list elements.  </p>