title: Increasing font size for links on hover changes background color size, how to stop this?
body: <p>I'm new to html &amp; css so bear with me. I feel it's something simple that I'm missing but I can't out what.</p>
  
  <p>For example, I have a navigation bar like this:</p>
  
  <pre><code>&lt;nav id="navbar"&gt;
      &lt;a class="nav" href="#home"&gt;Home&lt;/a&gt; &amp;#124;
      &lt;a class="nav" href="#link1"&gt;Link 1&lt;/a&gt; &amp;#124;
  &lt;/nav&gt;
  </code></pre>
  
  <p>With css:</p>
  
  <pre><code>#navbar {
      font-family: "Tahoma", Geneva, sans-serif;
      font-size: 18pt;
      text-align: center;
      background-color: rgba(0,0,0,0.75);
      color: white;
      margin:15px;
      padding: 15px;
  }
  </code></pre>
  
  <p>I've set the links font to increase in size and change color when I hover over them:</p>
  
  <pre><code>a.nav:hover {
      color: red;
      font-size: larger;
  }
  </code></pre>
  
  <p>Which works fine, but when i hover over the links the background of my nav bar increases downwards a bit as if to fit my new text size. How can I stop the background from changing size?</p>