flex布局导航栏背景图无法左对齐且出现多余滚动条如何解决

问题表现 #

• 计划设置的半屏高背景图无法从屏幕最左侧起始位置显示
• 页面无意义生成多余滚动条

问题根因 #

• .container同时设置了width: 100%和左右50px内边距，默认content-box盒模型规则下，元素实际占位宽度为「视口宽度 + 100px」，横向超出视口直接触发横向滚动条。
• 作为背景图父容器的.container没有设置position: relative，绝对定位的.bg-img没有明确的定位锚点；且.bg-img未设置left/top偏移值，默认停留在flex布局的原排列位置，无法贴靠左侧边缘。
• 浏览器默认给body标签添加了8px外边距，会进一步加剧元素偏移、触发多余滚动条。
• .bg-img未设置尺寸约束，无法实现预期的半屏高覆盖效果。

修复代码 #

调整后的CSS #

/* 全局重置：清除浏览器默认边距，统一盒模型规则 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  min-height: 50vh; /* 直接实现半屏高度要求 */
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
  position: relative; /* 给内部绝对定位的背景图提供定位锚点 */
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
  list-style: none; /* 清除ul默认列表缩进，避免意外偏移 */
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
}

.bg-img {
  opacity: 0.9;
  position: absolute;
  z-index: -1;
  left: 0; /* 强制贴靠容器最左侧 */
  top: 0; /* 强制贴靠容器最顶部 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片不变形铺满容器 */
}

HTML结构（无需调整，保持原有逻辑即可） #

<div class="container">
  <img src="files/images/logo.png" alt="LOGO" class="logo">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>
  <img src="files/images/top-bg.jpg" alt="bg" class="bg-img">
</div>

修复说明 #

• 全局设置box-sizing: border-box后，内边距、边框会被算入元素设置的宽度内，100%宽度搭配左右padding不会再超出视口，从根源消除横向多余滚动条。
• 给.container添加position: relative后，内部绝对定位的背景图会以它为定位基准，搭配left:0; top:0属性可直接贴靠容器左上角，不会再出现左侧偏移问题。
• min-height: 50vh直接让导航栏区域占半屏高度，背景图设置100%宽高加object-fit: cover，可以在不变形的前提下铺满整个半屏区域。
• 清除了ul默认列表样式、浏览器默认body边距，避免内置默认样式带来的意外偏移。

内容的提问来源于stack exchange，提问作者nick