Flex容器设置width:100%仍无法铺满页面宽度的问题排查

嘿，我之前也碰到过一模一样的坑！其实问题根源就是浏览器的默认样式——大多数主流浏览器（比如Chrome、Firefox）会给<body>元素默认加上margin: 8px，这就导致你的容器哪怕设置了width:100%，也只能占满<body>的内容宽度，而不是整个浏览器视口的宽度。

具体原因拆解 #

浏览器自带的默认样式表会给<body>、<ul>这类常见元素添加默认边距/内边距：

• <body>的默认margin会在页面四周留出一圈空白，你的容器的100%宽度是相对于<body>的内容区域计算的，自然没法铺满整个视口；
• 另外<ul>默认还有左内边距，会导致你的导航列表项没法完全居中对齐，也是个容易忽略的小问题。

解决方案 #

只需要在CSS开头添加一段重置默认样式的代码，就能彻底解决：

/* 重置浏览器默认样式，消除页面空白和元素默认边距 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* 可选，防止横向滚动条意外出现 */
}

把这段代码放在你原有CSS的最前面，再配合一些小细节调整，你的容器就能真正铺满整个页面了。

修改后的完整CSS示例 #

/* 重置默认样式 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.head{ 
  display: flex; 
  height:100px; 
  width:100%; 
  font-size: calc(1rem + 1vw); 
  justify-content: center; 
  align-items: center; 
}
.head h1{ text-align: center; }

nav ul{ 
  margin-top:50px; 
  margin-bottom:50px; 
  display:flex; 
  flex-direction: row; 
  width:100%; 
  align-items: center; 
  align-content: center; 
  justify-content: space-evenly; 
  list-style: none; 
  padding: 0; /* 重置ul默认左内边距，让导航完全居中 */
}
nav ul li{ margin:0 10px; }
nav ul li a{ display: inline; color: black; font-size:calc(0.8rem + 1vw); }

.mission{ 
  background-color: black; 
  display:flex; 
  min-height:320px; 
  width:100%; 
  background-image: url("pictures/5be98a7d18e35.jpg"); 
  background-position: bottom; 
  background-size: cover; 
  background-repeat: no-repeat; 
}

这样调整后，不仅你的背景图容器能铺满整个页面宽度，导航栏的对齐效果也会更规整哦~

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