Html 元素大小调整不正确

我在css中设置了一个

背景图像

，其高度干扰了他上面声明的元素。还有三个内容区域在屏幕变小时无法正确调整大小。当屏幕变小时，所有的东西都应该叠在一起，但是看起来好像有一个空白。我用

%

和

em

来定位我认为现在是错误的东西。有谁能帮我解决这些问题，并推荐一种更好的方法来定位问题，这样我就不会有这个问题了？我知道我的CSS很糟糕，但我对它还不熟悉，我自己也在学习。这是我创建的代码笔会话的链接

代码笔：

---

另外，如何调整字体大小，使其与包含的元素一起缩放，而不会随着视口变小而重叠？

对于任务部分，通过删除旧字体来使用css，这将解决您的问题

   #mission {
        display: flex;
    background-color: #ffffff;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/97/Sveshtnik_IMG_3782.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    padding-bottom: 7%;
    color: #005944;
    max-width: 100%;
    max-height: 100%;
    background-size: cover;
    clear: both;
}

---

而不是

display:flex

float:left也为您工作
谢谢。然而，当我重新调整窗口大小时，我仍然会在上面的任务部分和内容部分之间找到一个红色背景的间隙；这将解决你的问题，让你错过这个把戏。谢谢但是为什么它会起作用呢？就像我之前所说的，我对CSS比较陌生，所以我想了解为什么事情会起作用以及最佳实践