i have this example html

<mat-sidenav-container>
    <mat-sidenav class="side-bar-left" mode="side" [opened]="isLeftPanelOpened" position="start" *ngIf="!isPreviewMode">
     ==== some component  ====
    </mat-sidenav>

    <mat-sidenav class="side-bar-right" mode="side" [opened]="(rightPaneState$ |async) != RightPanelState.Hidden"
                 position="end" *ngIf="!isPreviewMode">
      ==== some component  ====
    </mat-sidenav>

</mat-sidenav-content>

the side-bar-left appears side-by-side with the main content.
the side-bar-righ go over the main content and hides it.

my css for these classes is:

.side-bar-left {
  border-left: 2px solid;
}

.side-bar-right {
  border-right: 2px solid;
}

so this is not a css problem.