Фоновое изображение в сетке bootstrap
При верстке bootstrap по уроку делаю все как говорит Иван, вставляю фоновое изображение а оно как то странно себя ведет. Мое изображение отделяется строго по моим заданым колонкам, но при этом на весь экран.https://ibb.co/HYVnnqX Как мне это исправить?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uber</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<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="img/logo.png"></a>
<div class="subheder_official">Официальный партнер Uber в Москве</div>
</div>
<div class="col-md-2 offset-md-2">
<div class="subheader_call">Звоните нам ежедневно</div>
<a href="tel:+84957970988" 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">
<!-- <img src="img/promo.jpg" class="promo_img">-->
<div class="row">
<div class="col-md-10 offset-md-1">
<h1 class="promo_header">КОМПАНИЯ UBER PARTNERS!</h1>
<h2 class="promo_subheader">ПРИГЛАШАЕМ ВОДИТЕЛЕЙ! НА СВОЕМ АВТО!</h2>
<p class="promo descr">
Компания UBER динамически развивающаяся. Компания на рынке занимает лидирующее место среди
таксомоторных компаний, Компания абсолютно прозрачная вы можете контролировать все процессы у себя в личном кабинете. Бонуcная система.Помимо выполненной работы по заказам, компания начисляет бонусы за
пиковое время.<br><br>
Мы одни из партнеров и зарекомендовали себя как одна из лучших команд в городе Москве. Водители у нас
зарабатывают от 80000- 120000 в месяц.
</p>
<button class="promo_btn">ОТПРАВИТЬ ЗАЯВКУ!</button>
</div>
</div>
</div>
</section>
</body>
</html>* {
font-family: 'Roboto', sans-serif;
}
nav {
height: 50px;
background-color: #212121;
}
.menu {
display: flex;
justify-content: space-between;
padding: 13px 70px;
margin: 0;
list-style-type: none;
}
.menu .menu_link {
font-size: 15px;
font-weight: 300;
color: #ffffff;
}
.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: 0.5;
color: white;
font-size: 13px;
font-weight: 400;
}
.subheader .subheader_call {
margin-top: 23px;
font-size: 12px;
font-weight: 300;
text-align: right;
color: #ffffff;
}
.subheader .subheader_phone {
display: block;
margin-top: 8px;
font-size: 22px;
font-weight: 400px;
text-align: right;
color: #ffffff;
text-transform: uppercase;
line-height: 22px;
}
.subheader .subheader_btn {
margin-top: 21px;
width: 172px;
height: 46px;
box-shadow: inset 0px -3px 0 0 rgba(0, 0, 0, 0.12);
border: solid 3px rgba(0, 0, 0, 0.07);
border-radius: 4px;
background-image: linear-gradient(to top, #1eacc7, #4ce2ff);
text-shadow: 0.7px 0.7px 0 rgba(0, 0, 0, 0.21);
font-size: 14px;
color: #ffffff;
text-align: center;
text-transform: uppercase;
}
.promo {
min-height: 800px;
background: url('../img/promo.jpg') center center/cover no-repeat;
}
.promo .promo_header {
color: #ffffff;
font-size: 36px;
font-weight: bold;
}
