Почему текст выходит из div?

Question

Может кто-нибудь объяснить мне, почему текст выходит из div? И я не могу сосредоточиться вертикально. Почему это из списка ul ul?

.experience-section {
  padding: 0 25px;
}

.experience-section .figure {
  font-family: 'Garamond-Italic';
  background: url('../img/x.svg') no-repeat;
  background-size: 100%;
  height: 283px;
  width: 283px;
}

.experience-section .figure ul li:first-child {
  font-size: 193px;
}

.experience-section .figure ul li:nth-child(2) {
  font-size: 80px;
  letter-spacing: 0.2em;
  margin-top: 23px;
}

<div class="col-md-4">
  <div class="experience-section" style="background-image:url(assets/img/welcome-bg-1.jpg);">
    <div class="figure">
      <ul>
        <li>15</li>
        <li>years</li>
      </ul>
    </div>
    <h3>Our words talk about experience</h3>
    <p>Nunc rhoncus advenenatis est nec hdrerit. Donec eu mauris sapien. Maecen id metus pellentesque ex feugiat cursus cenustsque feugiatus cursus cesius alteri.</p>
  </div>
</div>

изображение здесь

Answer 1

.experience-section {
  padding: 0 25px;
}

.experience-section .figure {
  font-family: 'Garamond-Italic';
  background: url('../img/x.svg') no-repeat;
  background-size: 100%;
  height: auto;
  width: 283px;
}

.experience-section .figure ul li:first-child {
  font-size: 193px;
}

.experience-section .figure ul li:nth-child(2) {
  font-size: 80px;
  letter-spacing: 0.2em;
  margin-top: 23px;
}

<div class="col-md-4">
  <div class="experience-section" style="background-image:url(assets/img/welcome-bg-1.jpg);">
    <div class="figure">
      <ul>
        <li>15</li>
        <li>years</li>
      </ul>
    </div>
    <h3>Our words talk about experience</h3>
    <p>Nunc rhoncus advenenatis est nec hdrerit. Donec eu mauris sapien. Maecen id metus pellentesque ex feugiat cursus cenustsque feugiatus cursus cesius alteri.</p>
  </div>
</div>

Answer 2

причина: Вы жестко закодировали height:283px до .experience-section .figure. Поскольку размер шрифта велик, он перекрывался. Вы можете установить высоту автоматически, чтобы исправить это.

Answer 3

Размер шрифта меньше высоты div, но из-за значения по умолчанию line-height текст выходит за пределы Div.