Блок накладывается на блок
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uber</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="css/bootstrap-grid.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<ul class="menu">
<li class="menu_item"><a href="#" class="menu_link">Главная </a></li>
<li class="menu_item"><a href="#" class="menu_link">Со своим автомобилем</a></li>
<li class="menu_item"><a href="#" class="menu_link">На автомобиле компании</a></li>
<li class="menu_item"><a href="#" class="menu_link">Требования</a></li>
<li class="menu_item"><a href="#" class="menu_link">Контакты</a></li>
<li class="menu_item"><a href="#" class="menu_link">Оставить заявку</a></li>
</ul>
</div>
</nav>
<div class="subheader">
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-1">
<a href="#" class="subheader_logo"><img src="icons/logo.png" alt="logo"></a>
<div class="subheader_official">Официальный партнер Uber в Москве</div>
</div>
<div class="col-md-2 offset-md-2">
<div class="subheader_call">Звоните нам ежедневно</div>
<a href="tel:+74957970988" class="subheader_phone">8 495 797 09 88</a>
</div>
<div class="col-md-2">
<button class="subheader_btn">заказать звонок</button>
</div>
</div>
</div>
</div>
</header>
<section class="promo">
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1">
<h1 class="promo_header">КОМПАНИЯ UBER PARTNERS!</h1>
<h2 class="promo_subheader">ПРИГЛАШАЕМ ВОДИТЕЛЕЙ! НА СВОЕМ АВТО!</h2>
<div class="promo_descr">
Компания UBER динамически развивающаяся. Компания на рынке занимает лидирующее место средитаксомоторных компаний, Компания абсолютно прозрачная вы можете контролировать все процессы у себя в личном кабинете. Бонуcная система.Помимо выполненной работы по заказам, компания начисляет бонусы запиковое время.
<br><br>
Мы одни из партнеров и зарекомендовали себя как одна из лучших команд в городе Москве. Водители у насзарабатывают от 80000- 120000 в месяц.
</div>
<button class="promo_btn">ОТПРАВИТЬ ЗАЯВКУ!</button>
</div>
</div>
</div>
</section>
</body>
</html>
CSS
* {
font-family: 'Roboto', sans-serif;
}
header {
height: 50px;
background-color: #212121;;
}
.menu {
display: flex;
justify-content: space-between;
padding: 13px 70px;
margin: 0;
list-style-type: none;
}
.menu .menu_link {
color: #ffffff;
font-size: 15px;
font-weight: 300;
}
.menu .menu_item {
border-right: 2px dotted black;
padding-right: 28px;
}
.subheader {
height: 84px;
background-color: rgba(0, 0, 0, .6);
}
.subheader .subheader_logo {
display: block;
max-width: 100%;
margin-top: 16px;
}
.subheader .subheader_official {
margin-top: 6px;
opacity: .6;
color: #FFF;
font-size: 13px;
font-weight: 100;
}
.subheader .subheader_call{
margin-top: 19px;
color: #FFF;
text-align: right;
font-size: 12px;
font-weight: 300;
}
.subheader .subheader_phone {
display: block;
margin-top: 8px;
color: #FFF;
text-align: right;
font-size: 22px;
text-transform: uppercase;
line-height: 12px;
}
.subheader .subheader_btn {
margin-top: 19px;
width: 172px;
height: 46px;
flex-shrink: 0;
border-radius: 4px;
background: linear-gradient(0deg, #1EACC7 0%, #4CE2FF 100%);
box-shadow: 0px -3px 0px 0px rgba(0, 0, 0, 0.12) inset;
color: #FFF;
text-align: center;
text-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.21);
font-size: 14px;
text-transform: uppercase;
}
}
Уже весь день бьюсь с этой проблемой, по идеи блок promo должен быть отдельным от subheader, но они накладываются друг на друга(((
Источник: Stack Overflow на русском