title: Border-bottom 1px too long on both sides CSS
body: <p><strong>What I am doing:</strong>
  On hover of a button I am addding a border-bottom of 5px.</p>
  
  <p><strong>JS FIDDLE:</strong> <a href="http://jsfiddle.net/mUCNB/" rel="nofollow noreferrer">http://jsfiddle.net/mUCNB/</a></p>
  
  <p><strong>Problem:</strong></p>
  
  <p>The problem is the border bottom extends 1px too far on both the left and right side.</p>
  
  <p><img src="https://i.stack.imgur.com/gFtZq.png" alt="enter image description here"></p>
  
  <p><strong>Question:</strong> </p>
  
  <p>Does anyone know how to fix this?</p>
  
  <p><strong>Relevant Code:</strong></p>
  
  <pre><code>#main-nav li a {
  display: block;
  padding-top: 15px;
  text-align: center;
  height: 35px;
  font-size: 18px;
  line-height: 18px;
  color: #fff;
  text-decoration: none;
  background-color: #00a0c8;
  }
  
  #main-nav li a:first-child, #main-nav li a:nth-child(2) {
  width: 224px;
  border-right: 1px solid #ffffff;
  }
  
  #main-nav li a:nth-child(3) {
  width: 225px;
  }
  
  #main-nav li a:last-child {
  width: 224px;
  border-left: 1px solid #ffffff;
  }
  
  #main-nav  a:hover {
  height: 30px;
  border-bottom: 5px solid #0BC6F5;
  }
  </code></pre>