html - 即使设置了 100%，也不使用 100% 宽度的水平导航栏

Question

我正在尝试制作一个非常基本的示例网站。

这是我的 JSFiddle (fullscreen)。

我试图从导航栏开始。我希望它 float 并且跨越整个浏览器宽度。但是，正如您将在 fiddle 中看到的那样，浏览器被设置到页面中并且不使用整个浏览器的宽度。

我已经告诉它使用 100% 的宽度，但它在两边都被截断了。我什至告诉它以 101%+ 的速度运行，但这些方法并不受欢迎，因为它们会导致水平滚动。

每个，我重复一遍，我能找到的每个帮助文章都说“将宽度设置为 100%，你会没事的!”

这种方法从未对我起作用，我不明白为什么。

不是 chrome 误读了 width 属性，因为 Firefox 也有同样的问题。

我希望这个栏横跨顶部，就像我们上面这个 StackExchange 页面上的栏一样。

有人可以帮我实现这个吗？这是如何完成的？

注意:我知道我的栏还没有 float ，我会这样做的。

Answer 1

虽然您的代码中的所有内容都是正确的，但您忘记添加以下内容:

CSS

* {
    margin: 0;
    padding: 0;
}

它基本上重置了所有浏览器的所有边距和填充查看演示:http://jsfiddle.net/3zU8Z/2/