Imej/kandungan tidak terkandung dalam div

Question

Saya cuba memasukkan imej di dalam div pertama halaman, tetapi atas sebab tertentu ia berada di luar halaman. Semua sumber terletak di flexboxes. Apabila saya meletakkan teks di dalam div itu dan bukannya imej, ia berfungsi dengan baik.

Saya telah membulatkan imej dan div yang saya maksudkan dengan warna merah. Coretan kod ini tidak akan menunjukkan kepada anda perkara yang saya perkatakan kerana ia bukan kod yang lengkap.

.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

Dari apa yang saya faham, anda telah pun memberikan ketinggian kepada "ikon" div. akan height 更改为 min-height

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