html - 为什么这个 CSS 不能正确地设置我的元素的样式？

Question

我正在尝试使用内联 block 导航栏。当有人将鼠标悬停在 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 将解决问题。

DEMO