mat-sidenav(mat-sidenav-container) covers mat-sidenav-content - css

Question

app.component.ts
<router-outlet></router-outlet>
nav-landing.component.html
I have a component that contains my mat-toolbar and my mat-sidenav-container. The menu to toggle to side nav is only shown on smaller devices.
<mat-toolbar ngClass="transparent-nav">
<div>
<mat-radio-group aria-label="Select a country">
<mat-radio-button value="All" [checked]="true" aria-label="All countries">All
</mat-radio-button>
<mat-radio-button value="C" aria-label="Country" [disabled]="true">North America
<mat-menu #cornwallOptions="matMenu">
<button mat-menu-item *ngFor="let n of northCountries" (click)="selectNorthAmerica(n)">
{{ n.country }}
</button>
</mat-menu>
</mat-radio-button>
</mat-radio-group>
<button mat-icon-button ngClass="btn-toggle">
<mat-icon (click)="sidenav.toggle()">
menu
</mat-icon>
</button>
</div>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav position="end">
<mat-accordion>
<mat-expansion-panel [disabled]="true" hideToggle (click)="selectAllCountries()">
<mat-expansion-panel-header>
All
</mat-expansion-panel-header>
</mat-expansion-panel>
<mat-expansion-panel [disabled]="true">
<mat-expansion-panel-header class="disabledExpansionPanel">
North Countries
</mat-expansion-panel-header>
<mat-nav-list>
<mat-list-item *ngFor="let n of northCountries" (click)="selectNorthAmerica(n)"> {{ n.country }}
</mat-list-item>
</mat-nav-list>
</mat-expansion-panel>
</mat-accordion>
</mat-sidenav>
<mat-sidenav-content>
<div ngClass="content">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
landing.component.html
I then call my nav bar inside my landing page.
<header>
<app-nav-landing></app-nav-landing>
</header>
<main ngClass="landing-main-bg">
<div ngClass="container">
<div ngClass="row justify-content-center align-items-center ">
<div ngClass="col-md-5">
<div ngClass="section-center">
<div ngClass="main-heading">
<app-search-box></app-search-box>
</div>
</div>
<div>
</div>
</div>
<div>
</div>
</div>
</div>
</main>
<app-footer></app-footer>
While testing I realized that the sidebar did not show when I clicked the menu. I later found out that it was being hidden so I added this CSS below and then the sidemenu started to show.
.mat-sidenav-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
}
However, I now realize that because of the position absolute the I am now longer able to type in the search box component because the mat-sidenav-container is now covering it. Once I remove the positional absolute I can search but I need position absolute to show the nav bar.
How do I stop the mat-sidenav-container from covering the other components?