页面锚点跳转时内容意外左移，根本原因是 css 盒模型默认使用 `content-box`，导致 `padding` 和 `border` 被额外计算进元素总宽度，触发浏览器滚动定位时因视口宽度变化而产生水平偏移；统一设置 `box-sizing: border-box` 并清理冗余 `margin-right` 即可彻底修复。
该问题在单页导航（SPA-style navigation）中极为典型：初始加载时页面显示正常，但一旦点击 navbar 中的锚点链接（如 About），浏览器执行平滑滚动并尝试将目标元素（如
? 根本原因：盒模型与滚动定位的隐式冲突
CSS 默认的 box-sizing: content-box 意味着：
.width-100 {
width: 100%; /* 仅指 content 区域占满父容器 */
padding: 0 8%; /* 这 16% 的 padding 会额外加在 width 之外！ */
}例如 .header 中的 padding: 10px 8%，在 width: 100% 下，实际占用宽度 = 父容器宽 + 左右各 8% → 超出视口。当锚点跳转触发滚动时，浏览器为确保目标元素完全可见，可能临时调整 overflow 或触发布局重排，进而暴露或隐藏垂直滚动条——滚动条宽度（通常 ~17px）的增减会瞬间改变可用视口宽度，导致所有 width: 100% 元素重新计算，产生肉眼可见的左移。
✅ 一行代码 + 三处清理：标准修复方案
第一步：全局启用 border-box 盒模型
在 CSS 文件顶部添加通配符重置（推荐放在 @import 后、其他规则前）：
* {
box-sizing: border-box;
}✅ 效果：width: 100% 将严格包含 padding 和 border，不再溢出；所有尺寸计算回归直观预期。
第二步：移除所有非必要 margin-right 居中 hack
检查并删除以下类中人为添加的 margin-right（它们本意是“右留白以模拟居中”，但在 border-box 下反而破坏布局）：
/* ❌ 删除这些冗余声明 */
.wrapper { margin-right: 20%; }
.about-section { margin-right: 17%; }
.project-counter-wrap ul { margin-right: 10%; }
.testimonials { margin-right: 15%; }
.contact-info, .hours { margin-right: 20%; }? 替代方案：使用现代布局居中（如 max-width: 1200px; margin: 0 auto;）替代 margin-right。
第三步：确保 body 无隐藏滚动干扰
补充健壮性防护（防止第三方样式或动态内容引入新滚动条）：
html {
overflow-y: scroll; /* 强制显示滚动条，避免跳转时宽度闪变 */
}
body {
overflow-x: hidden; /* 严格禁止横向滚动 */
}? 验证与最佳实践
- 测试方法：打开开发者工具 → Elements 面板 → 点击任意锚点链接 → 观察右下角滚动条是否稳定存在（无闪烁），同时用 Ctrl+Shift+M 切换响应式模式验证各断点。
-
注意事项：
- * { box-sizing: border-box } 是行业标准做法，兼容所有现代浏览器（IE8+），无需顾虑；
- 避免在 box-sizing: border-box 下对 width 和 padding 做重复补偿（如 width: calc(100% - 30px)），这会抵消其优势；
- 若项目已使用 CSS Reset（如 Normalize.css），确认其未覆盖 box-sizing 设置。
? 总结
页面锚点跳转左移并非 JavaScript 或 HTML 结构问题，而是 CSS 盒模型与浏览器滚动机制交互的副作用。通过 全局 border-box + 清理 margin-right + html 强制滚动条 三步组合拳，即可一劳永逸解决。此方案轻量、可靠、符合现代 CSS 最佳实践，建议作为所有响应式单页项目的初始化标配。
