Material card action buttons extend left & right beyond card content boundary

In this Angular 10.2 Material sample the right and left action buttons reach outside of the card-content:

The right edge of the "Create account" button should align with the right edge of the fields; similarly, the left edge of the "Sign in" button should align with the left edge of the fields.

The green in the image is the padding area; the orange is the margin; and, the blue is action area. Why is does the blue&green not align with the orange?

The HTML is:

<mat-card class="signup-card">
  <mat-card-header>
    <mat-card-title>The title</mat-card-title>
    <mat-card-subtitle>The longer explanatory sub-title.</mat-card-subtitle>
  </mat-card-header>

  <mat-card-content>
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div fxLayout="column">
        <div fxLayout="row" fxLayoutGap="10px">
          <mat-form-field>
            <mat-label>First name</mat-label>
            <input matInput formControlName="firstName">
          </mat-form-field>
          <mat-form-field>
            <mat-label>Last name</mat-label>
            <input matInput formControlName="lastName">
          </mat-form-field>
        </div>
        <mat-form-field>
          <mat-label>Email</mat-label>
          <input matInput formControlName="email" required>
          <mat-error *ngIf="email.errors?.required">Email is required</mat-error>
          <mat-error *ngIf="email.errors?.email">Not a valid email</mat-error>
        </mat-form-field>
        <div fxLayout="row" fxLayoutGap="10px">
          <mat-form-field>
            <mat-label>Password</mat-label>
            <input matInput type="password" formControlName="password" required>
            <mat-error *ngIf="password.errors?.required">Password is required</mat-error>
            <mat-error *ngIf="password.errors?.minlength">Password is too short</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-label>Confirm</mat-label>
            <input matInput type="password" formControlName="passwordConfirm" required>
            <mat-error *ngIf="passwordConfirm.errors?.required">Confirm password is required</mat-error>
            <mat-error *ngIf="passwordConfirm.errors?.mustMatch">Password and confirm must match</mat-error>
          </mat-form-field>
        </div>
      </div>
      <mat-card-actions >
        <button mat-button routerLink='/signin' routerLinkActive="active" type="button">Sign in</button>
        <div fxFlex></div>
        <button mat-flat-button routerLink='/signup' routerLinkActive="active" type="submit" color="primary">Create account</button>
      </mat-card-actions>
    </form>
  </mat-card-content>

  <mat-card-footer>
    The footer containing final parting thoughts...
  </mat-card-footer>

</mat-card>

and the CSS:

.mat-card-header {
  text-align: center;
  justify-content: center;
}

.signup-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

It seems like the alignment I want should be the default behavior so I must be doing something wrong...any ideas?

The answer to your question:

why the green padding extends beyond the orange margin. If the green padding == orange margin the buttons should align correctly without a work-around

is in CSS file for this component. On the image is default config for mat-card-action