如何去除页面右侧空白？设置html/body的max-width无效求助

嘿，我帮你分析下这个右侧空白的问题——你说设置了html/body的max-width没用，这很正常，因为这类全屏空白大概率不是根元素的宽度问题，而是页面里某个子元素溢出了视口导致的。给你几个实用的排查和解决方向：

• 先定位溢出元素：打开浏览器开发者工具（按F12），切换到元素面板，慢慢选中页面里的容器元素，看哪个元素的右侧超出了视口范围。重点检查导航栏（#navbar-list）里的li元素，比如是否多个li的宽度+边距总和超过了父容器，或者设置了固定宽度但没做响应式处理。
• 调整根元素样式：你当前给html/body加了width: 100%，其实块级元素默认就会占满父容器宽度，这个属性反而可能和padding/margin冲突。可以修改成这样：

html, body { 
  margin: 0; 
  padding: 0; 
  font-family: 'IBM Plex Sans Condensed', sans-serif; 
  background-image: url("img/masaze.jpg"); 
  background-repeat: no-repeat; 
  background-size: cover; 
  min-height: 100vh; /* 用min-height:100vh替代height:100%，避免内容超出时高度截断 */
  overflow-x: hidden; /* 临时添加这个属性，如果空白消失，说明确实有元素横向溢出 */
}

• 排查浮动或定位问题：如果#navbar-list里的li用了float，记得要给父容器清除浮动（比如加clearfix类）；另外检查是否有绝对定位的元素设置了right负值，或者left/width的组合导致超出视口。
• 检查背景图影响：虽然你说所有区域都有空白，但可以确认下背景图的尺寸比例——如果背景图本身宽度小于视口，background-size: cover会拉伸它，但如果是横向空白的话这个可能性很低，不过也可以试试background-position: center;确保背景图居中显示。

如果按照上面的步骤找到了溢出的元素，针对性地给它加max-width: 100%;或者调整边距、宽度，应该就能解决问题了。

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