在浏览器处于窗口模式时，元素的宽度更大

Question

基本上，我正试图创建我的第一个网站，而且我已经遇到了麻烦。

我正在制作导航栏并且它看起来都很好，但是只要我将浏览器置于窗口模式，导航栏就会超出它的范围，因此我必须侧向滚动才能到达它的末尾。

P.S。 我是stackoverflow的新手，仍然试图解决它。 所以我可能会做一些我不应该做的事情，只是让我知道，我会尝试解决它。​​

编辑1： 我正在使用谷歌浏览器。

这是JSFiddle的完整代码： http://goo.gl/Z5wvTn

如果查看页眉和页脚，您应该能够看到主要部分和导航栏实际上比它们宽。 导航栏和主要部分在div内，而其他元素不在。 没有JSFiddle，这种效果会大得多。

Answer 1

将header和footer放入wrapper div，然后decrease or adjust放置width的{​​{1}}。

jsFiddle

Answer 2

基于@Aayushi Jain和@Shivam所说的使用包装百分比。这样，您的包装器将根据窗口屏幕进行响应。

如果您想了解更多信息，请查看自适应设计。

我的版本是在你的包装上添加宽度：100％而不是定义固定宽度。

此外，使用ems和％的练习如@Aayushi Jain所说。

.wrapper {
    width: 100%;
}