当网页使用固定定位的视频作为背景时，若外层容器（如 .content）设置了内边距，会导致子元素导航栏左右留白、无法100%延伸至视口边缘；核心解决方法是移除该容器的 padding 并确保 nav 使用 min-width: 100% 配合 position: fixed。
当网页使用固定定位的视频作为背景时，若外层容器（如 `.content`）设置了内边距，会导致子元素导航栏左右留白、无法100%延伸至视口边缘；核心解决方法是移除该容器的 `padding` 并确保 `nav` 使用 `min-width: 100%` 配合 `position: fixed`。
在构建具有全屏视频背景的现代网页时，常见的布局陷阱之一是导航栏（
虽然 .content 被设为 position: fixed; width: 100vw; height: 100vh，看似已覆盖整个视口，但其内部的 padding: 20px 会向内收缩内容区域，使嵌套的 nav 实际可渲染宽度仅为 100vw - 40px（左右各20px），从而破坏了导航栏的全宽表现。
✅ 正确做法是：
- 移除 .content 的 padding 声明（保留 box-sizing: border-box 即可确保尺寸计算准确）；
- 将 nav 的 width: 100% 改为 min-width: 100%，避免极端缩放下意外收缩；
- 确保 body 和全局重置中无残留 margin/padding（你已通过 * { margin: 0; padding: 0; } 做好基础防护）。
以下是关键修复代码片段：
.content {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100vw;
height: 100vh;
/* 删除这一行 ? */
/* padding: 20px; */
box-sizing: border-box;
}
nav {
height: 80px;
background: #29282e;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0rem calc((100vw - 1300px) / 2); /* 此处居中逻辑仍有效 */
user-select: none;
position: fixed;
top: 0;
min-width: 100%; /* ✅ 替换 width: 100% 为更健壮的 min-width */
z-index: 1000; /* 推荐添加，确保导航始终位于视频上方 */
}
⚠️ 注意事项：
- 视频元素 #myVideo 使用 position: fixed 且 min-width: 100%; min-height: 100% 是合理方案，但需注意：right: 0; bottom: 0 可能导致在某些宽高比下出现裁剪，建议改用 top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; 更精准控制；
- 若 .content 内其他模块（如 .title-container）依赖水平居中，应将 padding 移至具体子容器（如 .title-container），而非全局 .content；
- 始终检查浏览器开发者工具中的“Computed”面板，确认 nav 的实际 width 是否为 100vw，并验证 offsetLeft 是否为 0。
修复后，导航栏将严格贴合视口左右边缘，同时保持原有居中文字布局与交互动效，视频背景也不再干扰整体结构流。
