Responsive images causing text and images to overflow out of the screen on small screen size

I have a web page that is using two images for a bio section. On the bigger and mid size screen sizes it re-sizes and flexes just fine but on really small sizes the text and half of each image flow off of the screen. I have figured out that the second image I am using causes this problem, but I do not know the proper way to correctly fix this bug.

UPDATE: For context, the second dog image skews the text to go off screen for some reason. Without that image the page behaves as intended.

What it looks like on small screen sizes

Tablet size screen

What it looks like on small screen sizes WITHOUT second image

Portion of HTML code containing these images:

<!-- 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>

CSS portion:

.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;
  }
}

Solution

I believe it would be better to restructure your div background images into img tags and to add flex-wrap: wrap. The reason for doing this is because the flexbox works better when there is one parent div with multiple items (at least for me). flex-wrap: wrap allows for more responsive images, so as you resize the site to a smaller width, the items will move on to the next. Try to resize the screen in the full page. You will be able to see flex-wrap: wrap in action!

.main__img--container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.main__img--card-bio {
  margin: 10px;
  height: 350px;
  width: 350px;  
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

.lorem {
  width: 50%;
  margin: 0 auto;
}

<body>
 <!-- About Section -->
<div class="main" id="about">
  <div class="main__container">
    <div class="main__img--container">
      <img class="main__img--card-bio" src="https://cdn.onlinewebfonts.com/svg/img_87237.png" alt="bio-pic"> 
      <img class="main__img--card-bio" src="https://cdn.onlinewebfonts.com/svg/img_87237.png" alt="bio-pic"> 
    </div>
    <div class="lorem">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
    </div>
  </div> 
</div>
</body>