Padding not applied on html tags in angular material [duplicate]

I am trying to apply some spaces after a h1 tag in my angular application. I am using angular material. The CSS code is

.h1{
    padding: 6px 10px 6px 10px;   /* 10px left and right padding*/
    box-sizing: border-box;
}

The html code is

<mat-toolbar color="primary" class="navbar">
    <mat-toolbar-row>
        <h1>MoD</h1>
        <div>
            <a mat-button [routerLink]="'/home'"> Home </a>
            <a mat-button [routerLink]="'/aboutUs'"> About Us </a>
            <a mat-button [routerLink]="'/contacts'"> Contacts </a>       
        </div>
    </mat-toolbar-row>
</mat-toolbar>

I cannot seem to understand why the padding-right makes no difference. The button is always close to the title. I am new to angular material, any help would be much appreciated, thank you.