Всех приветствую , текст расположен не на том месте как показано на видео? Что может послужить причиной?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='style.css'>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<title>Ресторан</title>
</head>
<body>
<header class='header'>
<div class='container'>
<div class='header-line'>
<div class='header-logo'>
<img src="./images/logo.png" alt="">
</div>
<nav class="nav">
<a class='nav-item' href="@">ГЛАВНАЯ</a>
<a class='nav-item' href="@">МЕНЮ</a>
<a class='nav-item' href="@">О НАС</a>
<a class='nav-item' href="@">БРОНЬ</a>
</nav>
<div class='cart'>
<a href="#">
<img class='cart-img' src="./images/cart.png" alt="">
</a>
</div>
<div class='phone'>
<div class='phone-holder'>
<div class='phone-img'>
<img src="./images/phone.png" alt="">
</div>
<div class='number'><a class='num' href='#'>+999-888-76-54</a></div>
</div>
<div class='phone-text'>
Свяжитесь с нами для <br> бронирования
</div>
</div>
<div class='btn'>
<a class='button' href='#'>ЗАКАЗ СТОЛИКА</a>
</div>
</div>
</div>
<div class="header-down">
<div class="header-title">
Добро пожаловать в
</div>
</div>
</header>
</body>
</html>
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
}
.container {
margin: 0px 166px;
}
.header {
background-image: url("./images/bg.jpg");
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
.header-line {
padding-top: 50px;
display: flex;
align-items: center;
justify-content: space-around;
}
.nav-item {
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 14px;
margin-right: 25px;
transition: color 0.3s linear;
}
.nav-item:hover {
color: #d81d1d;
}
.cart {
position: relative;
border-right: 1px solid #FFFFFF;
padding-right: 10px;
height: 50px;
}
.cart-img {
position: absolute;
top: 18px;
right: 7px;
}
.num {
color: #fff;
text-decoration: none;
font-weight: 700;
transition: color 0.3s linear;
}
.num:hover {
color: #d81d1d;
}
.phone-text {
font-size: 14px;
font-weight: 400;
color: #fff;
}
.phone-holder {
display: flex;
align-items: center;
}
.button {
background-color: #FF7400;
color: #fff;
text-decoration: none;
padding: 14px 18px;
font-weight: 700;
transition: background-color 0.2s linear;
}
.button:hover {
background-color: #894b17;
}
.header-down {
position: relative;
}
.header-title {
color: #D67E35;
}
Простой