используя RTl в css Но контент находится в середине страницы

Question

Я пишу angular админку, но есть проблема. Я использовал RTL в mu css, так что это будет панель RTL, но мой контент теперь находится в середине страницы, что мне делать?

это мой html код

<app-header ></app-header>


<mat-drawer-container>
    <mat-drawer mode="side" [opened]="sideBarOpen" >
        <app-sidebar></app-sidebar>
    </mat-drawer>
    <mat-drawer-content>
        <router-outlet></router-outlet>
    </mat-drawer-content>
</mat-drawer-container>

<app-footer></app-footer>

это мой css

:host{
    display: flex;
    flex-direction: column;
    height: 100%;
}

mat-drawer{
    width :250px;
}

mat-drawer-container{

height:100% ;
direction: rtl;
position: rtl;
padding: 1em 1em .5em 2em;

}

mat-drawer-content{
direction: ltr;
text-align: ltr;


}

Answer 1

Добавить position="end" в ящик для матов

<mat-drawer mode="side" [opened]="sideBarOpen" position="end">
    <app-sidebar></app-sidebar>
</mat-drawer>