页面初始显示正常，但点击导航栏内锚点链接跳转到页面指定区域后，内容整体向左偏移——这是由默认 `content-box` 盒模型与 `padding`/`margin` 叠加引起的布局抖动，核心解法是全局启用 `border-box` 并清理冗余右外边距。
该问题本质是 CSS 盒模型（Box Model）行为差异引发的视觉位移，并非 JavaScript 或 HTML 结构错误。当使用 width: 100% 配合 padding: 10px 8%（如 .header 类）时，若元素采用默认的 box-sizing: content-box，其实际占用宽度 = 内容宽度（100%）+ 左右 padding（共 16%），导致总宽度超出视口，触发水平滚动条。而浏览器在执行锚点跳转（）时，会自动调用 scrollIntoView() 行为——该行为不仅垂直居中目标元素，也会强制将水平方向滚动至“最贴合”的可视位置（通常是左侧对齐）。一旦页面因盒模型溢出产生隐藏的水平滚动条，跳转瞬间就会触发向左滚动，造成内容“突兀左移”的错觉。
✅ 根本解决方案：统一使用 border-box 盒模型
在 CSS 文件顶部添加全局重置规则，确保所有元素的 width 和 height 包含 padding 和 border：
* {
box-sizing: border-box;
}该声明让 width: 100% 的元素始终严格占据父容器 100% 宽度（含 padding），彻底消除因盒模型计算偏差导致的溢出。
立即学习“前端免费学习笔记（深入）”；
⚠️ 同步清理冗余 margin-right 声明
观察原始代码，多处存在为“视觉居中”而添加的 margin-right（如 .wrapper, .about-section, .project-counter-wrap ul, .testimonials），例如：
.wrapper {
margin-right: 20%; /* ❌ 删除 */
}
.about-section {
margin-right: 17%; /* ❌ 删除 */
}这些值本意是手动缩进，但在 border-box 下反而破坏了流式布局逻辑，且与 Flex/Grid 的 justify-content: center 或 margin: 0 auto 冲突。请全部移除，改用标准居中方式：
- 容器级居中：margin: 0 auto; max-width: 1200px;
- 文字居中：text-align: center;
- Flex 子项居中：justify-content: center;
? 完整修复步骤总结：
添加全局 box-sizing
在 CSS 最上方插入 * { box-sizing: border-box; }；删除所有可疑 margin-right
搜索并移除 .wrapper, .about-section, .project-counter-wrap ul, .testimonials 等选择器中的 margin-right 声明；验证关键容器宽度逻辑
确保 .header 的 padding: 10px 8% 在 border-box 下不会溢出（现为：内容区 = 100% − 16% padding，完全安全）；保留 scroll-behavior: smooth（已存在）以维持平滑滚动体验。
? 额外建议：预防性检查
- 使用浏览器开发者工具（Elements → Computed → box-sizing）确认关键元素是否已生效；
- 在 标签上临时添加 style="outline: 2px solid red;"，快速识别是否有意外溢出；
- 避免在响应式断点中重复设置 margin-right，优先使用 max-width + margin: 0 auto 控制容器宽度。
遵循以上方案，锚点跳转将不再触发水平位移，页面滚动行为稳定、可预测，同时保持原有视觉结构与响应式表现。
