Progress bar does only show half completed on 100 percent inside mat-sidenav

Question

I am using a simple mat progress bar inside a mat side nav and inside content. if value is 100, then it should be completed but it is getting half filled while in mat side nav content it works as expected.

    <mat-sidenav-container>
       <mat-sidenav mode="side" 
       [(opened)]="opened">
       Start
       <mat-progress-bar value="100"></mat- 
       progress-bar>
       </mat-sidenav>
    <mat-sidenav-content>
    Main
    <mat-progress-bar value="100"></mat- 
    progress-bar>
    </mat-sidenav-content>
   </mat-sidenav-container>

Answer 1

<mat-progress-bar style="text-align: left;" value="100"></mat-progress-bar>

The style is set to center align so progress bar is also set to center align just make it left so that it goes to it's normal view

style="text-align: left;"