Bild/Inhalt ist nicht in einem Div enthalten

Question

Ich versuche, ein Bild in das erste Div der Seite einzufügen, aber aus irgendeinem Grund befindet es sich außerhalb der Seite. Alle Ressourcen befinden sich in Flexboxen. Wenn ich Text anstelle eines Bildes in dieses Div einfüge, funktioniert es einwandfrei.

Ich habe das Bild und das Div, von dem ich spreche, rot eingekreist. Dieser Codeausschnitt zeigt Ihnen nicht, wovon ich spreche, da es sich nicht um den vollständigen Code handelt.

.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

据我了解，您已经为 div“图标”提供了高度。将 height 更改为 min-height

.icons {
  border: 2px solid black;
  min-height: 50px;
}