Html 导航条赢得'；无法正确渲染

我的导航栏似乎比页面的其余部分延伸得更远。在JSFIDLE中查看我的代码，了解发生了什么。我似乎不明白为什么会这样

HTML:

---

第80行中缺少css的值：

  text-transform: ;

加上html实体，如$nbsp；在末尾<代码>$nbsp

将主体标记设置为：

body{
position:relative;
margin:0 auto;
width:1200px;
}

接下来给出#页眉包装和#页眉宽度100%

 #header-wrapper,#header{
 width:100%;
 }

这应该让你的#头在包装纸里面，包装纸应该留在你的身体里面

/==制表符文本==/

试着用这个替换你的#头导航a

 #header nav a {
 float:left; <!-- Changed from display:inline-block; -->
 text-decoration: none;
 color: #fff;
 padding: 0px 0px 0px 10px; <!-- changed from  0px 25px 0px 25px-->
 outline: 0;
 }

#标题导航a{
浮动：左；
文字装饰：无；
颜色：#fff；
填充：0px 0px 0px 10px；
大纲：0；
}

你能分享你的JSFIDLE吗？@JustinBreiland道歉。我无意中发布了这个问题，但没有正确地超链接JSFIDLE并添加html和css。请看修改后的帖子。你的css有

#header{width:1200px；}

它比你的父div大，如果你去掉它，它会合适，但是header的子元素需要重新调整

#header nav{width:1066px；}

删除这个too@racecarjonathan，谢谢更新。更改#header{width:auto；}@JustinBreiland我已经用{width:auto；}更新了#header，但是选项卡都向左移动。“主页”选项卡现在完全脱离导航栏。想法？我已经应用了您的建议，导航栏现在呈现正确，但选项卡文本仍然向左对齐。建议？我已编辑我的答案以解决选项卡文本问题

 #header-wrapper,#header{
 width:100%;
 }

 #header nav a {
 float:left; <!-- Changed from display:inline-block; -->
 text-decoration: none;
 color: #fff;
 padding: 0px 0px 0px 10px; <!-- changed from  0px 25px 0px 25px-->
 outline: 0;
 }