Html 如何调整页面内容，使其仅占屏幕宽度？

使用开发工具，我的内容以较低的bps缩减。从页眉导航到页脚的所有内容都在一个容器中。容器设置为：

.container {
    width: 800px;
    margin: 0 auto;
    border: 2px solid green;
}

在800px，我有一个水平滚动和内容缩小，增加空间底部的页脚。使用媒体查询，如何用容器填充屏幕

---

宽度：100%

这将使容器div占据整个视口。

我想你想要的是

宽度：100%

和

最大宽度：800px

我想你在寻找媒体查询：

@media only screen and (max-width: 800px) {
  .container {
    width: 100vw;
  }
}

查看文档

---

干杯！谢谢，我想就是这样