Angular Material's mat-sidenav width is 1 pixel less than the what is set in CSS

Question

Hey was trying to setup a Angular Material SideNav and after getting a basic layout setup I noticed a white line on the right side when the SideNav is open (not over). When looking at it in dev tools it is 1 pixel less than the width I set it to be.

So mat-sidenav width is 1 pixel less than the what I set in CSS. I set it to be 240 and it comes back 239 and that makes it 1 pixel smaller than expected and exposes the white that is under it. See screenshot below.

I created a stackblitz that reproduces this issue.

https://stackblitz.com/edit/angular-skcmty?embed=1&file=app/sidenav-overview-example.html

Answer 1

The mat-sidenav appears to have a border-right property of 1px. You can change it in your css:

 mat-sidenav{
   border-right:0px;
 }