title: How to prevent font-size change of child element to stretch parent container in CSS
body: <p>I have a simple nav bar:</p>
  
  <pre><code>&lt;nav&gt;
   &lt;a href="#"&gt;Home&lt;/a&gt;
   &lt;a href="#"&gt;About&lt;/a&gt;
   &lt;a href="#"&gt;Register&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>with following CSS for nav and a tags:</p>
  
  <pre><code>nav
  {
      background-color:black;
      color:white;
      text-align:center;
      font-size:150%;
      padding:2%;    
  }
  nav a
  {
      text-decoration:none;
      color:white;
      padding:2%;    
  }
  nav a:hover
  {
      background-color:white;
      color:black;
      font-size:120%;            
  }
  </code></pre>
  
  <p>It looks pretty much as I want it to, except that nav container stretches on hover, because font size is larger. How can I prevent nav from stretching?</p>