Закрыто - Bootstrap - Как выровнять вертикальное положение гамбургер-меню в Bootstrap Studio

У меня следующая проблема: я создал веб-сайт в Bootstrap Studio с шаблоном «Чистое небо», поэтому на моем сайте есть эта панель навигации с отображением переключателя панели навигации, когда размер экрана меньше определенной ширины. Когда переключатель становится видимым, и я нажимаю эту кнопку, предстоящее гамбургер-меню оказывается в ловушке, а некоторый контент навигационной панели соответственно. содержимое гамбургер-меню не видно, над "LEISTUNGEN" должно стоять "HOME". Когда я пытаюсь сделать его видимым, ссылки на обычной панели навигации также меняются.

Вот скрин до нажатия:

Перед нажатием

Здесь виден «срез»:

После нажатия кнопки

Что я могу изменить в CSS-коде или что я могу написать с помощью JavaScript, чтобы решить эту проблему?

РЕДАКТИРОВАТЬ

Я не нахожу ошибку точно, я забыл, что хотел создать размытую прозрачную панель навигации и карусель под ней, поэтому я играл с некоторыми настройками Margin и Padding. Что бы я ни изменил, после воссоздания веб-сайта без каких-либо изменений настроек Margin и Padding на панели навигации меню гамбургера теперь работает нормально.

Код навигационной панели: (все, кроме навигационной панели, находится внутри навигационной панели, не ведитесь на отступ после второй строки)

<nav class="navbar navbar-light navbar-expand-lg fixed-top clean-navbar" style="/*background:none;*/background-color:rgba(255,255,255,0.8);background-image:none;z-index:1000;font-family:Montserrat, sans-serif;padding:0px;margin:0px;height:70px;width:100%;">
<div class="container-fluid" style="background-color:rgba(0,0,0,0);">
    <a href="#" class="navbar-brand text-primary logo" style="color:#000000;margin-right:16px;padding-left:15px;">Neugart-GmbH</a>
    <button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggler" style="margin-left:0px;margin-right:15px;font-size:20px;">
        <span class="sr-only" style="/*color:#ff0404;*/">Toggle navigation</span>
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navcol-1" style="background:none;background-color:rgba(0,0,0,0);">
        <ul class="nav navbar-nav ml-auto">
            <li role="presentation" class="nav-item" style="margin-top:0px;padding-top:0px;">
                <a href="index.html" class="nav-link text-primary" style="color:#000000;font-size:13px;">Home</a>
            </li>
            <li role="presentation" class="nav-item">
                <a href="services.html" class="nav-link text-primary active" style="color:#000000;font-size:13px;">Leistungen</a>
            </li>
            <li role="presentation" class="nav-item">
                <a href="references.html" class="nav-link text-primary" style="color:#000000;font-size:13px;">Referenzen</a>
            </li>
            <li role="presentation" class="nav-item">
                <a href="about-us.html" class="nav-link text-primary" style="color:#000000;font-size:13px;">Unser Team</a>
            </li>
            <li role="presentation" class="nav-item">
                <a href="contact-us.html" class="nav-link text-primary" style="color:#000000;font-size:13px;">Kontakt</a>
            </li>
        </ul>
    </div>
</div>
</nav>