angularmaterial.css,html - CSS with angular material - Stack Overflow

I am a beginner to angular. What i have currently is a sidenav container with the content being a mat toolbar. Now my question is, as you can see, when it's viewed with a full sized desktop, the background colour of the toolbar stretched and filled the entire width, whereas when it's viewed with a phone, the background colour is not filled all the way leaving some gap that's not pleasant to look at.

I have tried setting mat sidenav content width to be 100% thinking that it would take up the entire space of the width

For further information, this is the html.

class="sidenav"

fixedInViewport

[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"

[mode]="(isHandset$ | async) ? 'over' : 'side'"

[opened]="false">

(click)="drawer.close()">

close

routerLink="/"

(click)="drawer.close()">Home

routerLink="/products"

(click)="drawer.close()">Products

aria-label="Toggle Sidenav"

mat-icon-button

(click)="drawer.toggle()">

menu

routerLink="/">

src="assets/images/WWtrans.png" />

class="button">

svgIcon="search">

class="button">

svgIcon="login">

class="button">

svgIcon="shopping-cart">

and here is the css

.logo {

display: flex;

margin: auto auto;

outline: none;

align-self: center;

justify-content: center;

align-self: center;

min-width: 100px;

max-width: 100px;

.ww-logo {

width: 60%;

cursor: pointer;

}

}

.button {

border: 1px solid red;

width: 10px;

}

.sidenav-container {

height: 100%;

width: 100%;

}

mat-sidenav-content {

width: 100%;

}

Thank you for any help in advance