css - Chrome での CSS の問題 - ナビゲーション要素のバンプ

Question

クラスのアカデミック モックアップに取り組んでいます。HTMLとCSSのみを使用して、既存の企業のWebページをシンプルに再現したものです。先週、すべてのブラウザーですべてが完全に機能していました。提出前にチェックするために昨日開いたところ、問題がありました。

Chrome のみで、ナビゲーション バーの最後の要素が 19 ピクセル下に突き出されています。

ページ。リンク
css. リンク

関連する css。

#navbar {
    position:absolute;
    display:block;
    top: 115px;
    left:0px;
    width:100%;
    height: 45px;
    background:url(../images/navbar_section.png) repeat-x;
    padding:0px;
    margin:0 auto;
    text-align:center;
    -webkit-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.27);
    -moz-box-shadow:    0px 2px 2px rgba(50, 50, 50, 0.27);
    box-shadow:         0px 2px 2px rgba(50, 50, 50, 0.27);
}
#navmenu {
    float:left;
    left:50%;
    position:relative;
    width:964px;
}
#navmenu ul, li {
    display: inline;
}
#navmenu li a {
    font-size:1em;
    float: left;
    color: white;
    font-weight:bold;
    border-left:2px groove #008dcb;
    text-decoration: none;
    line-height:45px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    right:50%;
    padding-left:10px;
    padding-right:10px;
    width:138px;
}
#navmenu li a:hover {
    color: white;
    background:url(../images/navbar_visited.png);
}
#navmenu li:last-child a {
    border-right:2px groove #008dcb;
}

関連するhtml。

<div id="navbar">
  <div id="navmenu">
    <ul>
      <li><a href="#">SHOP</a></li>
      <li><a href="#">WHY ALLTEL</a></li>
      <li><a href="#">PLANS</a></li>
      <li><a href="#">APPS & MORE</a></li>
      <li><a href="#">CAREERS</a></li>
      <li><a href="#">EMPLOYEES</a></li>
    </ul>
  </div><!--end of navmenu-->
</div><!--end of navbar-->

css ファイルを見ると、navmenu と navmenu2 を見ると少し混乱するかもしれませんが、2 つ目は私が実装していない別のスタイルであるため、navmenu に注目してください。

エラーを変更せずに width 要素を削除しようとしました。
上記のコードを新しい html ドキュメントにのみコピーしようとしました。同じエラー。

私は完全に途方に暮れています。助けてください！