Angular 8 components showing below sidebar instead of being on the side - css

Question

I have a collapsible sidebar. On click of a link from the sidebar, I want to display the components next to the sidebar but they show below it.
My Component Code:
<app-topbar></app-topbar>
<div class="wrapper">
<app-sidebar></app-sidebar>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets/bn.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
My Component's CSS:
.navbar{
background-color: #1F85DE;
}
.card{
flex: auto;
}
My Sidebar Component's HTML:
<nav id="sidebar" class="navbar-dark bg-#1F85DE" style="background-color: #1F85DE;" [ngClass]="{'hidden': sideNavService.hideSideNav }">
<hr>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home Page</a>
<hr>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
<hr>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
<hr>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
<hr>
</li>
</ul>
</nav>
My Sidebars's CSS:
:host {
background: #343a40;
}
#sidebar {
min-width: 200px;
max-width: 200px;
min-height: 100vh;
color: #fff;
transition: all 0.3s;
font-weight: 300;
font-size: 1rem;
line-height: 1.5;
}
#sidebar.hidden {
margin-left: -200px;
}
a[data-toggle="collapse"] {
position: relative;
}
#media (max-width: 575px) {
#sidebar {
margin-left: -200px;
}
#sidebar.hidden {
margin-left: 0;
}
}
a, a:hover, a:focus {
color: inherit;
}
#sidebar .sidebar-header {
padding: 20px;
}
#sidebar ul li a {
padding: 15px;
display: block;
width: 100%;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
hr {
border-top: 1px solid #fff;
margin-top: 0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
The code is making my Sidebar appear on the left side but the component that I want to display is not occupying the empty save on the right of the sidebar instead, after the sidebar ends, its occupying the save there.

Answer 1

<ng-sidebar-container>
<ng-sidebar [opened]="opened" position="right" mode="push" autoCollapseWidth=100>
<img src="assets/myimage_compressed.jpg" class="rounded-circle" width=80 height=80/>
<ul class="menu">
<li> <a routerLink="/">Dash Board</a></li>
<li> <a routerLink="/post">Post</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</ng-sidebar>
<div ng-sidebar-content>
<!-- side page component ,Here i have used main component -->
<app-main></app-main>
</div>
</ng-sidebar-container>