I want to make a specific grid a footer

i have an grid with 2 Buttons. These two buttons should be at the right and left side. And the grid has to be footer.

My HTML looks like this:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="buttons.component.css" />
    </head>

<mat-grid-list cols="25" rowHeight="fit" style="height: 50px ">
    <mat-grid-tile rowspan="1" colspan="22">
        <footer>
            <div class="button_zurück">
                <button mat-raised-button (click)="back()">Zurück</button>
            </div>

            <div class="button_weiter">
                  <button mat-raised-button (click)="forward()">Weiter</button>
            </div>
        </footer>
    </mat-grid-tile>    
</mat-grid-list>
</html>

The CSS looks like this:

 .button_weiter{
    margin-left:80%;
 }

  .button_zurück{
     margin-right: 80%;
 }

  .mat-flat-button,.mat-raised-button,.mat-fab,.mat-mini-fab{
      color:rgba(255,255,255,255);background-color:rgb(16, 78, 139);
  }

  .mat-button,.mat-raised-button,.mat-icon-button,.mat-stroked-button,.mat-flat-button,.mat-fab,
  .mat-mini-fab{

  font-family:Verdana, Geneva, Tahoma, sans-serif, "Helvetica Neue", sans-serif;font-size:11pt;
  font-weight:500;
 }

 .mat-focus-indicator.mat-raised-button.mat-button-base{
     margin-left: 25%;
 }

 .mat-grid-tile{
     background: lightblue;
 }

 footer{
     margin-top: auto;
 }

And Picture of the Website is as follow:1

Source: Angular Questions