When I view my form in the browser and zoom out, the form breaks into three columns,

First column is the title,
Second column is the form,
Third column is the buttons.

When I zoom back in, it remains in three columns which then requires me to horizontally scroll to the right to click the buttons, I would like to keep the form structure from top the bottom regardless of how the user zooms in and out, unfortunately I can’t figure out where the issue is coming from.

<mat-step label="Legal" class="margin-top-32" [stepControl]="legalFormGroup" [completed]="legalFormGroup.valid" *ngIf="true">
      <div fxFlex="100" fxLayout="row" fxLayoutAlign="center center" class="margin-top-32">
        <i class="material-icons registration-stage-icon">
          edit
        </i>
      </div>
      <div fxFLex="100" fxLayout="row" fxLayoutAlign="center center" class="margin-top-32">
        <h2 class="text-centre font-bold">
          Nearly there!
          <br />
          To access  you need to accept these conditions.
        </h2>
      </div>
      <form [formGroup]="legalFormGroup" fxLayout="column wrap" fxFlexOffset="25" fxFlex="50">
        <mat-checkbox id="new_user_agree_TandC" formControlName="new_user_agree_TandC">
          I agree to <a href="#" target="_blank">Terms and
            Conditions</a>
        </mat-checkbox>
        <mat-checkbox id="new_user_agree_privacy" formControlName="new_user_agree_privacy">
          I agree to <a href="#" target="_blank">Privacy Statement</a>
        </mat-checkbox>
        <mat-checkbox id="new_user_receive_vita_notifications" formControlName="new_user_receive_vita_notifications">
          I would Like to receive notifications.
        </mat-checkbox>
        <mat-checkbox id="new_user_auto-approved" formControlName="new_user_auto-approved" class="auto-approved-checkbox">
          <div>I understand that my account will be auto-approved with entry level access if my organisation has a
            designated Company</div>
          <div>Administrator in  AND the email domain used for account creation matches the existing Company
            domain.</div>
          <div>Where this doesn't apply, account approval may be delayed while we contact my organisation for access
            confirmation.</div>
        </mat-checkbox>
        <div fxFlex="100" fxLayout="row" fxLayoutAlign="center center" class="margin-top-64"
          *ngIf="!processingRegistration">
          <button fxFlex="50" mat-stroked-button matStepperPrevious class="cancel-button">
            << Back </button>
              <button fxFlex="50" mat-flat-button type="submit" class="primary_two white-colour"
                [disabled]="!legalFormGroup.valid" (click)="performRegistration()">
                Create Account >>
              </button>
        </div>
        <div fxFlex="100" fxLayout="row" fxLayoutAlign="center center" class="margin-top-64"
          *ngIf="processingRegistration">
          <mat-progress-spinner [mode]="inderterminate" [diameter]="32">
          </mat-progress-spinner>
          <p class="margin-left-10">
            Registering you now...
          </p>
        </div>
      </form>
    </mat-step>