Angular putting two components side by side

Issue

I know this question has been asked before, but none of the solutions I have found have worked for me yet.

Basically, I have two components (a side nav bar and the router-outlet for the main content). I want them to be side by side, but something always goes wrong.

If I use container-fluid, they overlap and the router outlet doesn't reach the right edge.

<div class="container-fluid">
    <div class="row">
        <router-outlet></router-outlet>
        <app-sidebar></app-sidebar>
    </div>
</div>

If I use regular container, they do not overlap, but the main content is even further from the right edge.

<div class="container">
    <div class="row">
        <router-outlet></router-outlet>
        <app-sidebar></app-sidebar>
    </div>
</div>

OR

<div class="container">
        <router-outlet></router-outlet>
        <app-sidebar></app-sidebar>
</div>

If I try to add columns, they become even more congested

<div class="container">
    <div class="row">
        <div class="col">
            <router-outlet></router-outlet>
        </div>
        <div class="col">
            <app-sidebar></app-sidebar>
        </div>
    </div>
</div>

If I don't use a container at all, the main content touches the right side, but they overlap again.

<router-outlet></router-outlet>
<app-sidebar></app-sidebar>

OR

<div class="row">
    <router-outlet></router-outlet>
    <app-sidebar></app-sidebar>
</div>

I'll stop adding pictures, but I've tried many other methods and tried using CSS. My point is I keep running into at least one thing not displaying the way I want it to. I'm still an amateur so any advice is appreciated, thanks.

(Some things I tried in CSS: flex, float, left: 0 , right: 0, width: 100.5%, padding: 0, overflow-x: hidden, margin: 0)

Also, this is the CSS for the sidebar:

.sidebar{
    width: 200px;
    position: absolute;
    left: 0; top: 76px;
    min-height: 100%;
    background-color: azure;
    border-right: 10px solid lightblue;
}

Solution

To anyone wondering, I fixed it like this.

<div class="row gutterFix">
   <div class="colSide">
      <app-sidebar></app-sidebar>
   </div>
   <div class="colMain">
      <router-outlet></router-outlet>
   </div>
</div>

.row.gutterFix{
    --bs-gutter-x: 0
}

.colSide{
    flex: 0 0 auto;
    width: 15%;
}

.colMain{
    flex: 0 0 auto;
    width: 85%;
}

Answered By - Zedword