网页图片无法铺满整页宽度 出现横向滚动条/留白如何解决

• 浏览器默认会给body标签添加8px左右的外边距，这就是你看到图片两侧始终有小边距的直接来源。
• 你给html、导航栏、英雄图都设置了width: 100vw，但100vw的计算宽度包含浏览器右侧纵向滚动条的占位宽度，一旦页面内容高度超过视窗高度触发纵向滚动条，100vw宽的元素实际宽度就会超出可视内容区，直接撑出横向滚动条。
• 代码里还有个小笔误：li选择器下的font-family属性重复写了属性名前缀，属于无效语法。

不需要改动HTML结构，直接替换原有CSS代码即可：

/* 全局重置浏览器默认边距，统一盒模型计算规则，从根源避免莫名边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: #ebf1be;
}

#navbar {
  display: flex;
  align-items: center;
  background-color: #ebf1be;
  width: 100%;
  height: 12%;
  position: fixed;
  top: 0;
  left: 0;
  font-family: 'Fraunces', serif;
  z-index: 2;
}

.nav_bar {
  display: flex;
  align-items: center;
  margin-left: auto;
}

li {
  list-style-type: none;
  margin: 0 3em;
  font-family: 'Fraunces', serif;
}

header {
  width: 100%;
}

/* Main Body CSS....*/
#hero {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  margin-top: 100px;
  z-index: 1;
}

#sticks {
  text-align: center;
}

• 普通文档流里的块级元素默认width: auto就会自动撑满父元素的可用内容宽度，不需要额外设置width: 100%，更不要随便用100vw给非全屏定位的元素设宽度，这是新手最容易触发横向滚动的错误操作。
• img是行内替换元素，默认会和文本基线对齐，底部留几像素的缝隙，加display: block转成块级元素就能消除这个缝隙，配合width: 100%就能完全贴合容器宽度，不会留边。
• 写CSS开头先加全局重置规则清除浏览器默认的margin、padding，能避免绝大多数莫名的边距、溢出问题。

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