Как сместить меню строкой ниже по отношению к заголовку в одном контейнере

Всем привет!
Пишу код на bootstrap-5.0.2. Отсюда и собственно проблемы.
Повторяю структуру кода как на видео в курсе BOOTSTRAP урок 3.5 и заголовок оказывается на одной строке, что и собственно само меню, хотя оно должно быть строкой ниже.

Вот код

{

<div class="container-fluid">
<div class="row">

<nav role="navigation" class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">

<div class="navbar-header header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1><a href="#">КиноМонстр</a></h1>
<p>Кино- наша страсть!</p>
</div>
</div>
</div>
</div>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<div class="navbar-nav nav-pills">
<a class="nav-link active" aria-current="page" href="#">Главная</a>
<a class="nav-link" href="#">Фильмы</a>
<a class="nav-link" href="#">Сериалы</a>
<a class="nav-link" href="#" >Рейтинг фильмов</a>
<a class="nav-link" href="#">Контакты</a>
</div>
</div>

</div>

</nav>

</div>
</div>

}