Keep navigation bars at fixed position

Recently strted with angular,

Try to setup layout for application, the current layout is work fine, but the issue is, the navigation bar are not staying at fix position, second if content is bigger in height or width should control by brower scroll bar.

I have tried with position:fixed by its just creating more mash

How can I setup my layout that I can achieve my desire laytout?

app.component.html

<div  id="wrapper">
    <div class="al-left" >
        <app-sidebar [isExpanded]="sidebarExpanded" (toggleSidebar)="sidebarExpanded = !sidebarExpanded" ></app-sidebar>
    </div>

    <div class="al-right"> 
        <app-navbar></app-navbar>
        <div class="ex-right" id="content">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

app.component.css

.al-right {flex-grow: 1;}
.al-right{margin-left:0px;
          margin-right:0px;}
.ex-right{
    margin-left:20px;
    margin-right:20px;
}