title: `hover` pseudo-class not working
body: <p>This is my css file, till now I have made a simple navigation bar. 
  But the point is for my <code>&lt;a&gt;</code> elements in the navigation bar, when I try to style them both in case <code>a</code> and <code>a:hover</code> they work only when I give <code>!important</code>. What is happening. Is there a specificity issue ? </p>
  
  <pre><code>@import url('http://fonts.googleapis.com/css?family=Lato');
  
  .navbar {
    background-color: #b6b5b4;
    border-style: solid;
  }
  
  .container {
    background-color: #bfbfbf;
  }
  
  body {
    font-family: Lato;
  }
  
  a {
    color: black !important;
    font-weight: bold;
  }
  
  .navbar-right {
    background-color: #aeaeae;
  }
  
  a:hover {
    background-color: #dfdfdf !important;
  }
  </code></pre>
  
  <p>I am new to css and html.</p>