Шапка сайта для Инстант на bootstrap

<!-- header #1 -->
<header class="header" id="header1">
<div class="center">
<div class="caption animated bounceInDown">
<h2 class="title display-3">Шапка сайта</h2>
<p class="text">В целом, конечно, высококачественный прототип будущего проекта предоставляет широкие возможности для распределения внутренних резервов и ресурсов. С учётом сложившейся международной обстановки, внедрение современных методик создаёт необходимость включения в производственный план целого ряда внеочередных мероприятий с учётом комплекса позиций, занимаемых участниками в отношении поставленных задач. Кстати, ключевые особенности структуры проекта, которые представляют собой яркий пример континентально-европейского типа политической культуры, будут представлены в исключительно положительном свете.</p>
<button class="btn btn-primary">click me</button>
<button class="btn btn-warning">click me</button>
</div>
</div>
<!-- scroll-down -->
<i class="scroll fa fa-angle-double-down"></i>
</header>
<style>
.header {
 position: relative;
 width: 100vw;
 height: 600px;
}
.header .center {
position: absolute;
top: 50%;
left: 50%;
width: 90%;
transform:translate(-50%,-50%);
z-index: 5;
 padding: 1rem;
}
.header .left {
 position: absolute;
top: 50%;
left: 50%;
width: 90%;
transform:translate(-50%,-50%);
z-index: 5;
 padding: 1rem;
}
.header .right {
 position: absolute;
top: 50%;
left: 50%;
width: 90%;
transform:translate(-50%,-50%);
z-index: 5;
 padding: 1rem;
}
.header .scroll {
 position: absolute;
 top: 95%;
 left: 50%;
 transform:translate(-50%,-50%);
 color: #fff;
 font-size: 1.5rem;
}
/*=== Large devices (desktops, 992px and up) ===*/
@media (min-width: 992px) {
.header .center {
 width: 50%;
}
.header .left {
 position: absolute;
 top: 20%;
 left: 10%;
 width: 40%;
 height: 60%;
 transform:translate(0, 0);
 padding: 1rem;
}
.header .right {
 position: absolute;
 top: 20%;
 left: 50%;
 width: 40%;
 height: 60%;
 transform:translate(0, 0);
 padding: 1rem;
}
.delay {
 animation-delay: 0.6s;
}
}
 
/* =======================================
 header#1
========================================*/
#header1 {
background: #355c7d;
 background:
 /* gradient overlay */
 linear-gradient(
 to bottom,
 rgba(203, 53, 107, 0.6), /* #cb356b */
 rgba(189, 63, 50, 0.5) /* #bd3f32 */
 ),
 /* bottom image */
 url('https://cdn.stocksnap.io/img-thumbs/960w/VPYPAS4FVT.jpg') no-repeat left top;
 background-size: cover;
z-index: 0;
}
#header1 .caption {
text-align: center;
 color: #fff;
}
#header1 .caption .title {
margin-bottom: 1.5rem;
}
#header1 .caption .text {
margin-bottom: 1.5rem;
}
#header1 .caption .action {
margin-bottom: 1rem;
padding-left: 3rem;
padding-right: 3rem;
border-radius: 15px;
}
 
</style>