我如何调整页面内容以仅占据屏幕宽度？

Question

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

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

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

Codepen of my code

Answer 1

[width:100%这将使容器div占据所有视口。