В шапке сайта образовался непонятный отступ при верстке сайта, помогите, пожалуйста.
HTML
html,
body {
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 100%;
background-size: cover;
position: relative;
z-index: 2
}
.video {
position: absolute;
z-index: 0;
width: 100% !important;
height: auto !important;
}
.bsoft {
font-family: 'Lobster', cursive;
color: white;
font-size: 22px;
padding-top: 25px;
text-shadow: 1px 1px 2px black;
}
ul,
li {
display: block;
padding: 0;
margin: 0;
}
.menu {}
.menu__item {
margin: 0 25px;
padding-top: 25px;
}
.menu__item a {
font-size: 22px;
color: #FFF5EE;
font-weight: bold;
text-decoration: none;
font-family: 'Lobster', cursive;
text-shadow: 1px 1px 2px black;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<header class="header">
<video class="video" autoplay muted loop>
<source src="qsoft.mp4" type="video/mp4">
</video>
<div class="container">
<div class="row">
<div class="col-lg-3">
<p class="bsoft">BSOFT</p>
</div>
<div class="col-lg-5 ml-auto">
<nav>
<ul class="menu d-flex justify-content-center">
<li class="menu__item">
<a href="#">
Главная
</a>
</li>
<li class="menu__item">
<a href="#">
Контакты
</a>
</li>
<li class="menu__item">
<a href="#">
Карта
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="dig">Первый digital-интегратор с<br> экспертизой в A.I. и Machine Learning</p>
</div>
</div>
</header>