Как поднять div элемент на уровень с заглавием?

Question

Цифра "01" должна стоять на уровне с заглавием, но по каким-то причинам элемент может только понизиться на пару пикселей, а вверх не идет. В чем причина?

.advantages_fst_section {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  margin-top: 70px;
}

.fst_title {
  grid-area: 1 / 3 / 2 / 5;
  font-family: Arial, sans-serif;
  text-align: left;
  padding-left: 120px;
}

.left_info_adg {
  grid-area: 1 / 3 / 3 / 4;
  margin: 10px;
  margin-top: 90px;
}

.left_info_adg_txt {
  font-family: Arial, sans-serif;
  font-size: 17px;
  list-style-type: none;
}

.right_info_adg {
  grid-area: 1 / 4 / 3 / 5;
  margin: 10px;
  margin-top: 90px
}

.right_info_adg_txt {
  font-family: Arial, sans-serif;
  font-size: 17px;
  list-style-type: none;
}

.overflow {
  overflow: hide;
  font-size: 210px;
  font-weight: 900;
  position: absolute;
  opacity: 0.1;
  margin-left: 530px;
}

.fst_img_adg {
  grid-area: 1 / 5 / 3 / 7;
}

.fst_img_adg_picture {
  width: 420px;
  height: 284px;
}

<div class="advantages_fst_section">
  <div class="fst_title">
    <h2>Заглавие главное завглавие</h2>
  </div>
  <div class="left_info_adg">
    <p class="left_info_adg_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
  </div>
  <div class="right_info_adg">
    <p class="right_info_adg_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
  </div>
  <div class="overflow">01</div>
  <div class="fst_img_adg">
    <img class="fst_img_adg_picture" src="https://avatars.yandex.net/get-music-content/2350646/64e4a2b5.a.11505854-1/m1000x1000?webp=false">
  </div>
</div>

Answer 1

Попробуйте поиграть с высотой строки (line-height):

.overflow {
  overflow: hide;
  font-size: 210px;
  font-weight: 900;
  position: absolute;
  opacity: 0.1;
  margin-left: 530px;
  line-height: 200px;
}

Answer 2

Вы это имели ввиду?

.overflow {
  overflow: hide;
  font-size: 210px;
  font-weight: 900;
  position: absolute;
  opacity: 0.1;
/*   margin-left: 530px; */
  top:-20px;
  left: 50%;
 transform: translateX(-50%);

}

БЛОГ НА HUSL

Как поднять div элемент на уровень с заглавием?

Ответы (2 шт):