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

Question

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 class="bodyAboutMe">
<img src="images/20210926_071241.jpg">
<div class="textAboutMe">
<h1>About Me</h1>
<p>about me text</p>
</div>
</section>
Website snip

Answer 1

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 class="bodyAboutMe">
<img src="https://i.stack.imgur.com/H1lak.jpg">
<div class="textAboutMe">
<h1>About Me</h1>
<p>about me text</p>
</div>
</section>