Html 响应图像导致文本和图像在小屏幕上溢出屏幕

我有一个网页，是使用两个图像的生物部分。在较大和中等尺寸的屏幕上，它可以重新调整大小和弯曲，但在非常小的尺寸上，文本和每个图像的一半都会从屏幕上流出。我已经发现我使用的第二个图像导致了这个问题，但是我不知道正确修复这个错误的正确方法

更新：对于上下文，由于某种原因，第二个狗图像会扭曲文本，使其脱离屏幕。如果没有该图像，页面将按预期运行

包含以下图像的HTML代码部分：

<!-- About Section -->
    <div class="main" id="about">
      <div class="main__container">
        <div class="main__img--container">
          <div class="main__img--card-bio"></div>
          <div class="main__img--card-bio"></div>
        </div>

---

使其更小，以接受2个宽度的图像

我认为最好将div背景图像重组为

img

标记，并添加

flex wrap:wrap

。这样做的原因是，当一个父div包含多个项时（至少对我来说），flexbox工作得更好

flex wrap:wrap

允许更具响应性的图像，因此当您将站点调整为更小的宽度时，项目将移动到下一个。 尝试在整个页面中调整屏幕大小。您将能够看到

flex-wrap:wrap

正在运行！

.main\uu img--容器{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.main__img——卡生物{
利润率：10px；
高度：350px；
宽度：350px；
背景尺寸：封面；
背景位置：中心；
边界半径：50%；
}
洛雷姆先生{
宽度：50%；
保证金：0自动；
}

对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。尼莫·埃尼姆·伊普萨姆·沃鲁帕特（Nemo enim ipsam Voluptate）是一个真正的沃鲁帕特（Voluptate），他是一个真正的消费者

.main__img--card-bio {
  margin: 10px;
  height: 350px;
  width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url("/images/bio-image2.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

.main__img--card-bio:nth-child(2) {
  margin: 10px;
  height: 350px;
  width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url("/images/kewl.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

@media screen and (max-width: 480px) {
.main__img--card-bio {
    margin: 10px;
    height: 100px;
    width: 100px;
    overflow: hidden;
  }

  .main__img--card-bio:nth-child(2) {
    margin: 10px;
    width: 100px;
    height: 100px;
    overflow: hidden;
  }
}