CSS flex/grid布局1440px及以上屏出现水平滚动条如何修复

问题原因 #

1. 未全局设置box-sizing: border-box，仅给html、body设置不生效，.main-container默认是content-box，设置width: 100%+左右20px内边距后，总宽度会变成100% + 40px，直接超出视口宽度。
2. 绝对定位的导航栏.nav-section设置了width: 100%，相对父容器的内容宽度计算，叠加父容器的内边距后会进一步扩大溢出范围。
3. 两列布局的.hero-container内放了3个直接子元素，多余的按钮会被挤到第二行，虽然不是溢出的核心原因，但会导致布局错乱。

修复步骤 #

第一步：全局统一盒模型 #

在CSS开头的html、body样式后面新增全局盒模型继承规则：

* {
  box-sizing: inherit;
}

这样所有元素都会继承html、body的border-box属性，内边距和边框不会撑大元素宽度。

第二步：修改导航栏宽度设置 #

删掉.main-container .nav-section里的width: 100%，新增left: 20px; right: 20px;，让导航栏自动适配父容器的可用宽度，不会溢出：

.main-container .nav-section {
  position: absolute;
  top: 0;
  /* 删除原有width: 100%属性 */
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 20px 0;
}

这里的20px和.main-container的左右内边距保持一致即可。

第三步（可选，修复布局错乱）：调整按钮位置 #

把.hero-container里的Learn more按钮移到.hero-text-container的最后，避免grid布局多余元素占位：

<div class="hero-text-container">
  <h1>
    Best way to <br />
    find your <span>gadget</span> needs.
  </h1>
  <p>
    Find the latest technology news and expert tech product reviews.
    <br />
    Learn about the latest gadgets and consumer tech products for
    entertainment, gaming, lifestyle and more.
  </p>
  <p>All gadgets are priced to be customer-friendly.</p>
  <!-- 把按钮移到此处 -->
  <button class="btn btn-secondary">Learn more</button>
</div>
<div class="hero-image-container">
  <img src="https://svgshare.com/i/b9d.svg" alt="Hero" />
</div>
<!-- 删除原本放在此处的按钮 -->

如果还是需要临时隐藏滚动条，确保overflow-x: hidden加在html和body上即可：

html, body {
  overflow-x: hidden;
}

内容的提问来源于stack exchange，提问作者J.Wujeck