Angular Material mat-sidenav-content not showing

Angular Material Version: @angular/material@14.0.2

I am building a web application using the Angular framework for the first time. The app-routing-module lazy loads a dashboard module that declares the desired components and imports the required modules. The dashboard module imports a dashboard routing module which holds the routes with the WrapperComponent as the parent and the side nav content as the children, split up into different components.

dashboard-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { LoginComponent } from './components/login/login.component';
import { WrapperComponent } from './components/wrapper/wrapper.component';

const routes: Routes = [
{
    path: '',
    component: WrapperComponent,
    children: [
        {
            path: 'dashboard', // --> localhost:4200/dashboard
            component: DashboardComponent,
        },
        {
            path: 'login', // --> localhost:4200/login
            component: LoginComponent,
        },
        {
            path: 'about', // --> localhost:4200/about
            component: AboutComponent,
        }
    ]
},
{
    path: '**',
    redirectTo: '/dashboard',
    pathMatch: 'full'
}
];

@NgModule({
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule]
})
export class DashboardRoutingModule { }

wrapper.component.html

<mat-sidenav-container>
<mat-sidenav #sideNav mode="side" opened="opened">
    <app-side-nav>
    </app-side-nav>
</mat-sidenav>
<mat-sidenav-content>
    <router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>

The app-side-nav component consists of the router links.

<div class="sidenav">
<div class="logo">
    <a (click)="toggleMenuState()" class="simple-text logo-mini">
        <div class="logo-img">
            <img src="./assets/images/sample_logo.png" alt="logo">
        </div>
    </a>
</div>

<ul class="nav">
    <li class="active nav-list-item"><a routerLink="/default-route"><i class="fa fa-dashboard fa-nav-icon"><span class="nav-item-text">Dashboard</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/some-route"><i class="fa fa-group fa-nav-icon"><span class="nav-item-text">Groups</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/some-route"><i class="fa fa-line-chart fa-nav-icon"><span class="nav-item-text">Charts</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/some-route"><i class="fa fa-book fa-nav-icon"><span class="nav-item-text">Portfolio</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/login"><i class="fa fa-user fa-nav-icon"><span class="nav-item-text">Login</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/some-route"><i class="fa fa-gear fa-nav-icon"><span class="nav-item-text">Settings</span></i></a></li>
</ul>

This seems to work fine because I can see the relevant content being loaded in the DOM depending on the button clicked. But for some reason, the content is not visible. Here is a screenshot of the dashboard component loaded. For some reason, it is loading with a margin of 1920px but even when removed the content is still not visible.

The structure seems to work yet there is something not quite right otherwise the content would show. Would appreciate any thoughts, suggestions or further questions.

from Angular Material mat-sidenav-content not showing