HTML背景图片无法全屏覆盖，右侧出现空白区域求助

以下是几个针对性的修复方案：

• 给body添加样式，清除默认边距并禁用横向溢出：
  部分浏览器会给body设置默认margin（如Chrome的8px），或是页面存在横向溢出元素导致空白。添加如下样式：

  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  

• 将container的宽度改为100vw：
  width: 100%是相对于父元素宽度，而100vw直接对应视口的横向宽度，能确保完全覆盖页面横向空间。修改后的容器样式：

  .container {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(../../assets/images/background.png);
    background-position: center;
    background-size: cover;
  }
  

• 排查页面内的横向溢出元素：
  如果页面中存在宽度超过视口的元素（比如未限制宽度的图片、文本块），会触发横向滚动条，造成背景右侧空白的视觉效果。可以暂时隐藏其他元素，逐一排查是否有此类元素。

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