max-width is pushing other items off the page-CodePudding

I am trying to make a scalable image on my website to make it mobile-friendly. I tried using max-width 100% and then set the height to auto, but that just pushed the text to the right of the screen. I tried to fix this by setting the text width to 66%, but that did nothing. I tried setting the width of the image to 33%, but when I did that the height auto stretched the image.

.bodyAboutMe {
  background-color: #1e1e1e;
  text-align: center;
  justify-content: space-between;
  padding: 10px 100px;
  color: white;
  display: flex;
}

.bodyAboutMe img {
  max-width: 100%;
  height: auto;
}

.textAboutMe {
  width: 66%;
  padding-left: 20px;
}

.bodyAboutMe h1 {
  padding-top: 25px;
  font-family: 'AboutMeFont';
  letter-spacing: 4px;
  font-size: 1000%;
}

.bodyAboutMe p {
  padding: 50px 150px;
  font-size: 150%;
}

<section >
  <img src="images/20210926_071241.jpg">
  <div >
    <h1>About Me</h1>
    <p>about me text</p>
  </div>
</section>

Website snip

CodePudding user response：

Since you what to keep them aside they cant be each 100% they shoud be both 100% width so changin the max-width to 50% fixes the problem with the mobile. If you dont want your image to be streached use object-fit:cover; or scale-down

.bodyAboutMe {
  background-color: #1e1e1e;
  text-align: center;
  justify-content: space-between;
  padding: 10px 100px;
  color: white;
  display: flex;
}

.bodyAboutMe img {
  max-width: 50%;
  object-fit: cover;
  height: auto;
}

.textAboutMe {
  width: 66%;
  padding-left: 20px;
}

.bodyAboutMe h1 {
  padding-top: 25px;
  font-family: 'AboutMeFont';
  letter-spacing: 4px;
  font-size: 100%;
}

.bodyAboutMe p {
  padding: 50px 150px;
  font-size: 150%;
}

<section >
  <img src="https://i.stack.imgur.com/H1lak.jpg">
  <div >
    <h1>About Me</h1>
    <p>about me text</p>
  </div>
</section>