title: change of font-weight to bold is unwantingly changing width of element
body: <p>Whilst creating a navigation bar for my site I decided to make the active page tab show up in bold for usability purposes, but when I change the <code>font-weight</code> on the element it only slightly makes the element wider, an example I made using hover effects instead demonstrates my issue and i've never known a way to solve it..</p>
  
  <p><a href="http://jsfiddle.net/amx7E/">http://jsfiddle.net/amx7E/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="mainNav"&gt;
      &lt;li class="navItem"&gt;
          &lt;a class="navLink" id="activeLink"&gt;Link 1&lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li class="navItem"&gt;
          &lt;a class="navLink"&gt;Link 2&lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li class="navItem"&gt;
          &lt;a class="navLink"&gt;Link 3&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>* {
      font-family: Arial;
      font-size: 14px;
      list-style: none;
      margin: 0;
      padding: 0;
      text-decoration: none;
  }
  
  #mainNav {
      background: RGB(200, 230, 240);
      border-bottom: 1px solid RGB(0, 0, 0);
      height: 30px;
      margin: 0 auto;
      position: relative;
      width: 100%;
  }
  
  .navItem {
      display: block;
      float: left;
      position: relative;
  }
  
  .navItem:last-child .navLink {
      border-right: 1px solid RGB(0, 0, 0);
  }
  
  .navLink {
      border-bottom: 1px solid RGB(0, 0, 0);
      border-left: 1px solid RGB(0, 0, 0);
      display: inline-block;
      height: 30px;
      line-height: 30px;
      padding: 0 15px;
      white-space: nowrap;
  }
  
  .navItem:hover .navLink {
      background: RGB(120, 200, 250);
      color: RGB(255, 255, 255);
      cursor: pointer;
      font-weight: bold;
  }
  
  #activeLink {
      background: RGB(90, 170, 220);
      color: RGB(255, 255, 255);
      font-weight: bold;
  }
  
  #activeLink:hover {
      background: RGB(110, 190, 240);
  }
  
  .navItem:hover .subNav {
      display: block;
  }
  </code></pre>