title: CSS navigation bar indication trouble
body: <p>PS:
  If you look closely at the bar when your hovering over a link a few pixels at the far right side stay black. Why is that and how do I fix it?</p>
  
  <p>The code for the current Navigation bar is as follows:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="navbar"&gt;
          &lt;a href="home.html" id="current"&gt;-home&lt;/a&gt;
          &lt;a href="about.html"&gt;about&lt;/a&gt;
          &lt;a href="store.html"&gt;store&lt;/a&gt;
          &lt;a href="contact.html"&gt;contact&lt;/a&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.navbar{
  width: 75%;
  background-color: black;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;}
  .navbar a:link, a:visited{
  background-color: black;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  border-right: 2px solid white;
  font-weight: bold;
  font-family: verdana;
  font-size: 37px;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;}
  .navbar a:hover, a:active, a:focus{
  background-color: #4A4A4A;
  text-decoration: underline;}
  #current a:link, a:visited{
  background-color: red;}
  </code></pre>
  
  <p>As you can tell by the code, I'm trying to set the color of the home link to red. But this obviously didn't work. How should I go about it?</p>