image/content not contained inside div - html

Question

I'm trying to contain an image inside the first div of this page and it's outside of it for some reason. All the assets are in a flexbox. It works completely fine when I put text inside that div but not an image.
I've circled in red which image and div I'm talking about.
The code snippet won't show you what I'm talking about since it isn't the full code.
.landing {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.introWrapper {
width: 1000px;
}
.intro1 {
font-size: 25px;
text-align: center;
font-family: 'Yapari';
align-items: center;
justify-content: center;
margin-top: 23px;
}
.intro2 {
font-size: 25px;
text-align: center;
font-family: 'Yapari';
/* font-weight: 72; */
margin-top: 50px;
}
#introCircle {
border: 2px solid black;
border-radius: 50%;
width: 230px;
height: 70px;
margin: auto;
}
.icons {
border: 2px solid black;
height: 50px;
}
.icon1 {
width: 30px;
}
<div id='landing' className={styles.landing}>
<div className={styles.introWrapper}>
<div className={styles.icons}>
<img src={icon1} className={styles.icon1}/>
</div>
<div id={styles.introCircle}>
<h1 className={styles.intro1}>HELLO I'M</h1>
</div>
<LastName />
<h1 className={styles.intro2}>A FULL STACK DEVELOPER</h1>
</div>
</div>

Answer 1

From what I understand you have provided a height to the div "icons" . change the height to min-height
.icons {
border: 2px solid black;
min-height: 50px;
}