html - この CSS が要素のスタイルを正しく設定しないのはなぜですか?

Question

インライン ブロック ナビゲーション バーを使用しようとしています。誰かがliの上にカーソルを置いたときに、背景色を変更したい-簡単です。

私のコードにより、背景が約 2 インチずれているように見えます。

問題のあるコードは次のとおりです-

css-

#mainNav {
    width: 100%;
    background:#bbb;
    border-right: 2px solid #777;
    border-left: 2px solid #777;
    border-bottom: 2px solid #555;
}

#mainNav ul li {
    display: inline-block;
    line-height:40px;
    font-size: 20px;
    padding: 0 15px 0 15px;
    border-right: 2px solid #777;
}

#mainNav ul li.active {
    background:#aaa;
}

#mainNav ul li:hover {
    background:#aaa;
}

html-

<div class='container_12'>
    <nav id="mainNav">
        <ul>
            <li class='active'><a href='#'>Home</a></li>
            <li><a href='#'>Games</a></li>
            <li><a href='#'>Forums</a></li>
        </ul>
    </nav>
</div>

スクリーンショット:

Answer 1

に与えるmargin-leftとli問題が解決します。

デモ