title: Can't seem to change color of link
body: <p>Here's a screenshot of the problem:
  <img src="https://i.stack.imgur.com/jjk1h.png" alt="enter image description here"></p>
  
  <p>Notice that we're on the <code>stalk</code> page. The CSS I wrote is supposed to change the color of the active page. Here is the CSS:</p>
  
  <pre><code>#nav {
      border-top:10px solid #A7C1D1;
      height:45px;
      padding-left:100px;
      padding-top:20px;
      margin-left:0;
      color:#000;
  }
  
    #nav a {
      color:#000;
      text-decoration:none;
    }
  
    #nav a:visited {
      color:#000;
    }
  
    #nav a:hover {
      color:#93AFBF;
    }
  
    #nav .active {
      color:#93AFBF;
    }
  </code></pre>
  
  <p>Before, I had the CSS for <code>#nav .active</code> to create a border around the active page. This worked and I could see the border around the word "stalk" when I was on the /stalk page. But this time around, I decided to just change the color of the word. This is where I ran into the issue. </p>
  
  <p>Here is the HTML rendered for the page:</p>
  
  <pre><code>  &lt;div id="nav"&gt; 
      &lt;a href="/"&gt;home&lt;/a&gt; &amp;middot; &lt;a href="/stalk" class="active"&gt;stalk&lt;/a&gt; &amp;middot; &lt;a href="#"&gt;link3&lt;/a&gt; &amp;middot; &lt;a href="#"&gt;link4&lt;/a&gt; 
    &lt;/div&gt;
  </code></pre>
  
  <p>If I take away the CSS for <code>#nav a:visited</code> then the CSS for <code>#nav .active</code> works, but now the visited links are blue when I want them to stay black.</p>