title: How to prevent html div from expanding when text size is changed
body: <p>So, I have a navigation bar.  I want each link text to grow and bold when on hover.  I have achieved this using css, but now whenever teh mouse hovers over the link the text size grows,b ut so does the div to accomodate that text. Any ideas on how to fix this.  Here is the jsfiddle link:</p>
  
  <p><a href="http://jsfiddle.net/j5pJk/" rel="noreferrer">jsfiddle</a></p>
  
  <p>CODE:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;body&gt;
      &lt;div id = "navigation"&gt;
          &lt;ul id = "nav"&gt;
              &lt;li&gt;&lt;a href = "mechadogs.org/home" class = "navlink"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href = "mechadogs.org/team" class = "navlink"&gt;Our Team&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href = "mechadogs.org/gallery" class = "navlink"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href = "mechadogs.org/community" class = "navlink"&gt;Community&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href = "mechadogs.org/first" class = "navlink"&gt;FIRST&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  #navigation{
      background-color:black;
      width:98%;
      font-family:calibri;
      padding:1%;
      margin-left:0px;
      position:absolute;
      top:0;
      left:0;
      display:block;
  }
  #nav{
      list-style-type:none;
  }
  ul#nav li{
      float:left;
      padding:0 6%;
  }
  .navlink{
      display:block;
      background-color:black;
      text-decoration:none;
      color:white;
  }
  .navlink:hover{
      font-weight:bold;
      font-size:14pt; 
  }
  </code></pre>