如何使内容（视频和图像）正确显示？HTML和CSS

我有一个非常基本的网页，上面有我在网上做教程时发现的菜单。这是一个包含两个视频和两个图像的页面，以水平列的形式显示，希望将来还会有更多的图像。页面标题和视频在我添加下面的两个图像之前看起来很好。在我添加图像后，视频和标题被切断，我无法向上滚动。我认为这与CSS中的包装器id有关。如果有人能指导我如何正确显示我的内容，我将不胜感激

我已经在下面复制并粘贴了我的代码

@charset“utf-8”；
* {
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Poppins”，无衬线；
}
身体{
高度：自动；
}
.包装纸{
位置：固定；
排名：0；
左：0；
身高：100%；
宽度：100%；
背景：线性梯度（-200度，#FEDD00，#FF6C2F）；
/*背景：线性梯度（375度，#1cc7d0，#2de98）*/
/*剪辑路径：圆形（计算时为25px（0%+45px）45px）*/
剪辑路径：圆形（计算时为25px（100%-45px）45px）；
过渡：所有0.3秒的缓进缓出；
溢出：自动；
}
#活动：选中~。包装器{
剪辑路径：圆形（75%）；
}
.菜单btn{
位置：绝对位置；
z指数：2；
右：20px；
/*左：20px*/
顶部：20px；
高度：50px；
宽度：50px；
文本对齐：居中；
线高：50px；
边界半径：50%；
字体大小：20px；
颜色：#fff；
光标：指针；
背景：线性梯度（-200度，#FEDD00，#FF6C2F）；
/*背景：线性梯度（375度，#1cc7d0，#2de98）*/
过渡：所有0.3秒的缓进缓出；
}
#活动：选中~菜单btn{
背景：#fff；
颜色：#FF6C2F；
}
#活动：选中~。菜单btn i:之前{
内容：“\f00d”；
}
包装纸{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
列表样式：无；
文本对齐：居中；
}
李先生{
利润率：15px0；
}
李先生{
颜色：无；
文字装饰：无；
字体大小：30px；
字号：500；
填充：5px30px；
颜色：#fff；
位置：相对位置；
线高：50px；
过渡：所有0.3秒缓解；
}
李：以后{
位置：绝对位置；
内容：“；
背景：#fff；
宽度：100%；
高度：50px；
左：0；
边界半径：50px；
变换：scaleY（0）；
z指数：-1；
转换：转换0.3s轻松；
}
a:悬停：在后面{
变换：scaleY（1）；
}
李娜：停下来{
颜色：#FF6C2F；
}
输入[type=“checkbox”]{
显示：无；
}
.内容{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：-1；
文本对齐：居中；
宽度：100%；
颜色：#202020；
高度：自动；
}
.内容.标题{
字体大小：40px；
字号：700；
}
.内容p{
字体大小：25px；
字号：600；
}
.集装箱{
明确：两者皆有；
溢出：自动；
}
.内容img{
最大宽度：100%；
高度：自动；
}
.外容器{
宽度：100%
}
.视频容器{
位置：相对位置；
垫底：56.25%；
填充顶部：35px；
身高：0；
溢出：隐藏；
}
.视频容器iframe{
位置：绝对位置；
排名：0；
左：0；
垫底：10px；
宽度：100%；
身高：100%；
}

动画




起床动画




用下面的代码替换你的css.content代码

     .content {
        position: absolute;
        z-index: -1;
        text-align: center;
        width: 100%;
        color: #202020;
        height: auto;
      }

无法添加图片太多我的postcheck此链接，不要忘记给这个答案打分，因为我是stackoverflow的新手。如果不能满足您的要求，请告诉我。非常感谢您的帮助！关于它为什么起作用的可能解释？再次感谢！！！您使用的是transform，从-50%开始，由于负值，它将隐藏内容部分的一半，然后从顶部和左侧填充，所以我将两者都删除