Navbar Burger (Dropdown) толкает содержимое вниз?

Когда моя навигационная панель сворачивается, появляется меню гамбургеров. Всякий раз, когда я нажимаю на нее, весь контент ниже сбрасывается и оставляет меня с испорченной домашней страницей.

Моя панель навигации:

<section class = "nav-bar">
<nav class = "navbar navbar-expand-lg navbar-light bg-light">
  <a class = "navbar-brand" href = "#"><img src = "WildfireGraphic1.png" class = "rounded float-left" alt = "icon1"></a>
  <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarNav" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation">
    <span class = "navbar-toggler-icon"></span>
  </button>
  <div class = "collapse navbar-collapse" id = "navbarNav">
    <ul class = "navbar-nav ml-auto">
      <li class = "nav-item active">
        <a class = "nav-link" href = "#">Home <span class = "sr-only">(current)</span></a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Film</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Info</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Über uns</a>
      </li>
    </ul>
  </div>
</nav>
</section>

Мой CSS:

body{
    text-align: justify !important;
}

#nav-bar{
    position: fixed;
  left: 0px;
  top: 0px;
    width: 100px;

}
.navbar-brand img{
    height: 40px;
    padding-left: 30;
}

.navbar-nav li{
    padding: 0 10px;
}

.navbar-nav li a{
    float: right;
    text-align: left;
}

.nav-bar ul li a:hover{
    color: #000000!important;
}

.navbar{
    background: #fff;
}

.navbar-toggler{
    border: none!important;
}

.nav-link{
    color: #555!important;
    font-weight: 600;
    font-size: 16px;
}

Я пробовал использовать метод Z-Index, но пока безуспешно. Может я что-то не так сделал?

https://jsfiddle.net/Lqzs1jdw/8/

Заранее спасибо.