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解决问题。

演示

Answer 2

它也应该是：

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

就像悬停被编码一样。不过，仍然不确定原来的问题。