Html 使用元视口丢失文本

我正在写我的第一个博客，我试图让它响应，我使用meta视口，但当我在不同大小的窗口中用Google Chrome测试它时，我写的文本消失了。 下面是我用css和html编写的一些代码，显示了我的问题：

.英雄{ 背景颜色：耐火砖； 显示器：flex； 证明内容：中心； } .集装箱{ 显示器：flex； 证明内容：中心； 宽度：1000px； 填充：10px； } 测验 奎恩·索伊？ araragi koyomi：生物工程学院的学生。自然王国；我是古斯坦 总的来说，植物和动物、动物、雪茄和雪茄都是无声的、不受欢迎的， salir con amigos、el queso、el vino y el chocolate、me encanta la programación和planeo enfocar mi carrera en programación tanto como pueda。 图：viaje a la laguna del otún

---

这是因为您使用的是确定的宽度。您的宽度设置为1000px，这是固定的，这意味着无论设备使用什么，元素的跨度都将仅为1000px。要解决这个问题，您可以使用百分比，它使元素相对于其父元素的某个宽度一致，或者使用查看器宽度，它定义元素相对于用户屏幕或视口的宽度。以下是如何做到这两个方面：

百分比：

.container{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px;
}

查看器宽度：

.container{
    display: flex;
    justify-content: center;
    width: 100vw;
    padding: 10px;
}

希望有帮助