I'm facing an issue in my angular project where I am trying to add a bootstrap navigation bar to the left of my screen. However, there is a small blank space that persists even after using a container-fluid.
Here is the code for my navigation bar:
<!-- admin.component.html -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<nav class="navbar navbar-light bg-dark">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" routerLink="/admin/themes">Themes and categories creation</a>
</li>
</ul>
</nav>
</div>
<div class="col">
<router-outlet></router-outlet>
</div>
</div>
</div>
This component is called in my app component like this:
<!-- app.component.html -->
<app-topbar></app-topbar>
<router-outlet></router-outlet>
For reference, you can view an example screenshot https://i.sstatic.net/U3PMK.png
I have also tried adding some custom CSS to the container-fluid but it didn't resolve the issue.
If anyone knows how to remove this unwanted whitespace, your help would be greatly appreciated.