Html 文本旁的图像（响应）

我制作了一个左边有图像，右边有文本的部分，在我改变浏览器的宽度或高度之前，它看起来不错。一切都出了问题

以下是更改宽度之前的外观：

之后：

我试图实现的目标如下所示： 我试图在小屏幕上实现的目标（相同的想法，不同的照片和文字）

这是我的密码：

我们的故事
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子，它是一个很好的例子。子宫内膜异位症对孕妇的影响。临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工，临时工。两人一组，一组，一组，一组，一组，一组，一组

/*关于我们*/

CSS:

。关于我们{
高度：90vh；
宽度：100%；
}
.关于我们img{
最大宽度：50%；；
身高：100%；
溢出：隐藏；
}
.关于我们img img{
最大宽度：100%；
显示：块；
高度：自动；
}
.关于我们的文本{
最大宽度：736px；
文本对齐：居中；
边缘顶部：-47em；
右边距：10em；
浮动：对；
}
.关于我们文本p{
字号：2rem；
线高：1.5
}

使用填充和边距来创建布局不是最好的主意。您应该查看引导和flex box来进行布局。填充和边距用于在创建布局后进行微小的调整。就这个问题而言，您可以使用flexbox解决这个问题

用答案中的两个类替换两个类：

.about-us{
    height: 90vh;
    width: 100%;
    display: flex;        
 }
.about-us-text{
    max-width: 736px;
    text-align: center;
    float: right;
}

如果您需要更多帮助，请在评论中告诉我

.about-us{
    height: 90vh;
    width: 100%;

}

.about-us-img{
    max-width: 50%;;
    height: 100%;
    overflow: hidden;


}
.about-us-img img{
    max-width: 100%; 
    display:block; 
    height: auto;
}
.about-us-text{
    max-width: 736px;
    text-align: center;
    margin-top: -47em;
    margin-right: 10em;
    float: right;
}

.about-us-text p{
    font-size: 2rem;
    line-height: 1.5
}


<!-- Meals Photo's -->

.about-us{
    height: 90vh;
    width: 100%;
    display: flex;        
 }
.about-us-text{
    max-width: 736px;
    text-align: center;
    float: right;
}