Bootstrap 4 макет боковой панели не выравнивается хорошо

Question

Работа над Angular SPA, в которой я использую начальную загрузку в качестве моей платформы CSS.Я создал разные компоненты и включил их в основной файл app.component.html.Все выровнены должным образом, кроме боковой панели начальной загрузки 4. Мне нужно, чтобы она была исправлена, и она должна находиться в крайнем левом углу экрана.

Проблема заключается в том, что он толкает основной корпус вниз.

<!--Include Navbar which works well-->
<app-navbar></app-navbar>
<div class="container">
  <!-- include sidebar-->
  <app-sidebar></app-sidebar>
  <router-outlet></router-outlet>
</div>

<div class="wrapper">
  <!-- Sidebar -->
  <nav id="sidebar">
    <div class="sidebar-header">
      <h3>Bootstrap Sidebar</h3>
    </div>

    <ul class="list-unstyled components">
      <p>Dummy Heading</p>
      <li class="active">
        <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
        <ul class="collapse list-unstyled" id="homeSubmenu">
          <li>
            <a href="#">Home 1</a>
          </li>
          <li>
            <a href="#">Home 2</a>
          </li>
          <li>
            <a href="#">Home 3</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
        <ul class="collapse list-unstyled" id="pageSubmenu">
          <li>
            <a href="#">Page 1</a>
          </li>
          <li>
            <a href="#">Page 2</a>
          </li>
          <li>
            <a href="#">Page 3</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Portfolio</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
  </nav>

</div>