Блог

Мой HTML-КОД:

 <header class="header">
  <div class="logo-box">
    <img src="./img/logo-white.png" alt="Natours Logo" class="logo">
  </div>

  <div class="text-box">
    <h1 class="heading-primary">
      <span class="heading-primary-main">Outdoors</span>
      <span class="heading-primary-sub">is where life happens</span>
    </h1>
  </div>
</header>
    
    
  

МОЙ код CSS

 /*
COLORS:

Light green: #7ed56f
Medium green: #55c57a
Dark green: #28b485
*/

.header{
  position: relative;
  height: 95vh;
  background-image: linear-gradient(to right bottom,#7ed56f94,#28b48594),url(../img/hero.jpg);
  background-size: cover;
  background-position: top;
  clip-path: polygon(0 0 ,100% 0, 100% 75vh ,0 100%);
}

.text-box{
  position: absoulute;
  top: 50%;
  left: 50%;
  background-color:red;
  text-align: center;
}

.heading-primary{
  color: #ffffff;
  text-transform: uppercase;
}

.heading-primary-main{
  display: block;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 35px;
  margin-right: -35px;
}

.heading-primary-sub{
  display: block;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 17.4px;
  margin-right: -17.4px;
}
  

Моя проблема с классом .text-box позиционирование не меняется даже после использования верхнего и левого атрибутов.
Мне нужно центрировать его, но вещь просто не сдвинется с места с той же позиции.
Вот как это выглядит даже после ввода атрибутов позиционирования

вы можете исправить свой position: absoulute; на position: absolute; , а для своего .test-box вы можете добавить свойство transform: translate(-50%,-50%); , которое переместит ваш заголовок в центр;

У вас там опечатка: position: absoulute; должно быть position: absolute; в этом правиле CSS