页面锚点跳转后内容整体左移，本质是 `box-sizing: content-box` 默认模型下 padding 和 margin 叠加导致的布局偏移；通过全局启用 `border-box` 模型并清理冗余右外边距即可彻底解决。
该问题看似是导航行为引发的“异常位移”，实则是 CSS 盒模型（Box Model）与浏览器滚动定位机制共同作用的结果。当点击 这类内部链接时，浏览器会自动执行平滑滚动，并将目标元素（如
✅ 根本解决方案：统一盒模型 + 清理干扰样式
只需两步，即可一劳永逸：
-
全局启用 border-box 模型
在 CSS 文件顶部添加通配符重置规则，强制所有元素采用更可预测的盒模型：
* {
box-sizing: border-box;
}该声明确保 width: 100%、padding 和 border 均被包含在设定的尺寸内，消除因 padding 外扩导致的隐式溢出。
-
移除冗余的 margin-right 声明
检查并删除以下选择器中无意义的 margin-right（它们本意可能是“居中”，但实际破坏了流式布局）：- .wrapper { margin-right: 20%; }
- .about-section { margin-right: 17%; }
- .project-counter-wrap ul { margin-right: 10%; }
- .testimonials { margin-right: 15%; }
这些 margin-right 并未配合 margin-left: auto 实现居中，反而人为压缩右侧空间，加剧滚动时的定位偏差。现代布局应优先使用 max-width + margin: 0 auto 或 Flex/Grid 容器控制对齐。
? 补充建议与验证要点
立即学习“前端免费学习笔记（深入）”；
- ✅ 确保 和 无意外 overflow-x: hidden 以外的隐藏滚动限制（当前代码中 html { overflow: scroll } 可安全保留，但非必需）；
- ✅ 验证所有 section 锚点元素是否设置了 id 且无重复（如 #services 在 HTML 中缺失对应 id，需补全）；
- ✅ 移动端媒体查询中已合理使用 flex-direction: column，无需额外调整，但建议为 .col 添加 box-sizing: border-box（尽管父级已全局设置，显式声明更稳妥）；
- ? 快速调试：在浏览器开发者工具中临时禁用 .header 的 padding: 10px 8%，若左移消失，则 100%确认为盒模型问题。
修复后，锚点滚动将保持视口稳定，内容不再发生横向偏移，同时提升整站样式的可维护性与响应一致性。这不仅是“修复 Bug”，更是践行现代 CSS 工程实践的关键一步。
