解决页面锚点跳转后内容左移的 CSS 根本原因与修复方案

页面锚点跳转后内容整体左移，本质是 `box-sizing: content-box` 默认模型下 padding 和 margin 叠加导致的布局偏移；通过全局启用 `border-box` 模型并清理冗余右外边距即可彻底解决。

该问题看似是导航行为引发的“异常位移”，实则是 css 盒模型（Box Model）与浏览器滚动定位机制共同作用的结果。当点击 这类内部链接时，浏览器会自动执行平滑滚动，并将目标元素（如

✅ 根本解决方案：统一盒模型 + 清理干扰样式
只需两步，即可一劳永逸：

1. 全局启用 border-box 模型
   在 CSS 文件顶部添加通配符重置规则，强制所有元素采用更可预测的盒模型：

* {   box-sizing: border-box; }

该声明确保 width: 100%、padding 和 border 均被包含在设定的尺寸内，消除因 padding 外扩导致的隐式溢出。

2. 移除冗余的 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 工程实践的关键一步。