CSS设置width为100%却仅占屏幕85%的原因排查

核心原因 #

1. 盒模型默认行为：CSS默认采用content-box盒模型，此时width仅代表元素内容区域的宽度。你的.Header-Fixed设置了width:100%同时添加了padding:4em，元素总宽度会变成100% + 4em*2（左右padding），超出父容器宽度后浏览器会自动压缩元素，导致内部.container视觉上无法铺满全屏。
2. 浏览器默认样式：多数浏览器会给body标签设置默认margin（通常为8px），这会让最外层header无法紧贴屏幕边缘，进一步加剧内部元素的宽度偏移。

修复代码 #

修改CSS，添加盒模型重置和默认样式清除：

/* 清除body默认margin */
body {
  margin: 0;
}

.Header-Fixed {
  position: sticky;
  z-index: 998;
  background-color: #FFFFFF;
  outline-style: solid;
  padding: 4em;
  outline-color: #E5E0FF;
  outline-width: 0.5px;
  width: 100%;
  /* 让width包含padding和border，避免溢出 */
  box-sizing: border-box;
}

.container {
  width: 100%;
  padding: 1em;
  outline-style: solid;
  outline-color: green;
  align-items: center;
  /* 同样给container设置盒模型，防止padding导致宽度溢出 */
  box-sizing: border-box;
}

额外建议 #

可以在项目开头添加全局样式重置，从根源避免类似盒模型问题：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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