横向导航背景色未铺满求助：设width:100%仍仅覆盖链接区域

嘿，我来帮你搞定这个问题！你遇到的核心问题其实是浮动元素导致的容器高度塌陷，加上一些小的布局偏移设置，才让背景色看起来只覆盖了链接区域。下面是不破坏现有菜单结构的修复步骤：

问题根源拆解 #

1. 你的 .nav 容器里，桌面端的 .menu 是浮动元素，而 .nav 没有做清除浮动处理，导致 .nav 的高度直接塌陷为0——你看到的蓝色背景其实是每个 li a 标签的背景，不是 .nav 的，所以只会跟着链接内容走。
2. .nav 设置了 left: 3px，这会让整个导航容器向右偏移3px，不仅左侧留空白，还会让导航右侧超出页面范围。
3. 浏览器默认给 body 加了 margin: 8px，这也会导致页面边缘有空白，让导航没法真正铺满全屏。

修复方案（代码修改） #

只需要做几个小调整，完全不影响你现有的菜单展开/收起功能：

/* 先重置body默认样式，消除页面边缘空白 */
body {
  margin: 0;
  padding: 0;
}

/* header */
.nav {
  background-color:#3333FF; 
  position: relative; 
  top: 0; 
  /* 移除left:3px，避免导航偏移 */
  color: #fff; 
  width: 100%;
}
/* 新增伪元素清除浮动，让.nav能被内部元素撑高 */
.nav::after {
  content: "";
  display: table;
  clear: both;
}

.nav ul {margin: 0; padding: 0; list-style: none;}
.nav li a {line-height: 40px; height: 40px; font-size: 18px; display: block; background-color:#3333FF; color: #fff; padding: 10px; text-decoration: none;}
.nav li a:hover, .nav .menu-btn:hover {background-color: #0000EE;}
/* menu */
.nav .menu {max-height: 0; display: inline-block; transition: max-height .2s ease-out;}
/* menu icon */
.nav .menu-icon {cursor: pointer; float: right; padding: 28px 20px; position: relative;}
.nav .menu-icon .nav-icon {background: #fff; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px;}
.nav .menu-icon .nav-icon:before, .nav .menu-icon .nav-icon:after {background: #fff; content: ''; display: block; height: 100%; transition: all .2s ease-out; width: 100%;}
.nav .menu-icon .nav-icon:before {top: 5px;}
.nav .menu-icon .nav-icon:after {top: -5px;}
/* menu btn */
.nav .menu-btn {display: none;}
.nav .menu-btn:checked ~ .menu {max-height: 420px;}
.nav .menu-btn:checked ~ .menu-icon .nav-icon {background: transparent;}
.nav .menu-btn:checked ~ .menu-icon .nav-icon:before {transform: rotate(-45deg); top:0;}
.nav .menu-btn:checked ~ .menu-icon .nav-icon:after {transform: rotate(45deg); top:0;}
@media (min-width: 48em) {
  .nav li {float: left;}
  .nav li a {padding: 15px 15px;}
  .nav .menu {clear: none; float: left; max-height: none; max-width: 100%;}
  .nav .menu-icon {display: none;}
}
@media screen only (max-width: 500px) { /* 修正原代码语法错误：ony改为only，移除多余分号 */
  .wide ul li {height: auto; width: 100%;}
  .container ul li {width: 40%;}
  h1 span {display: none;}
  #main, #firstside, #second .container, .block, firstsidewider {width: 100%;}
  .gcse-search {width:90%;}
}

修复说明 #

• 清除浮动：.nav::after 这个伪元素会在导航容器末尾生成一个不可见的块级元素，强制清除内部浮动，让 .nav 能正确计算高度，这样它的蓝色背景就能铺满整个宽度了。
• 移除 left:3px：解决导航偏移问题，让导航对齐页面左侧，配合 width:100% 实现真正的全屏效果。
• 重置 body 样式：消除浏览器默认的边距，确保导航完全贴合页面边缘。
• 修正媒体查询语法：原代码里的 @media screen ony (max-width: 500px;) 有拼写错误和多余分号，已经帮你修正，避免样式失效。

这样改完之后，你的导航背景色就能铺满全屏，同时原有的移动端菜单展开/收起功能完全不受影响~

内容的提问来源于stack exchange，提问作者quartzy