center form fields in Angular reactive form on iPhone screen

Question

I have a very basic Angular app as follows :

Contents of app.component.ts

import { Component } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'small-form';

  signupForm: FormGroup

  constructor(
    public fb: FormBuilder
  ) {
    this.signupForm = this.fb.group({
      firstName: ['', [Validators.required]]
    });
  }

  onSubmit() {
    console.log('The following first name was entered',  this.signupForm.value.firstName )
  }
}

Contents of app.component.html :

<div class="bordered-div">
  <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
    <h3 class="h3 font-weight-normal text-center">Sign up</h3>

    <div class="formControlBlock">
      <label for="firstName">First name</label>
      <input formControlName="firstName" type="text" id="firstName" class="formControl" required />
    </div>
    <p *ngIf="!signupForm.valid && signupForm.touched" class="error-block">
      Form is not filled correctly
    </p>
    <hr />
    <button [disabled]="!signupForm.valid" type="submit">Submit</button>
  </form>
</div>

Contents of app.component.css :

form {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  display: block;
  width: 500px;
  margin: 10px auto;
}

.formControlBlock {
  display: block;
  margin: 5px;
  padding: 5px;
  background-color: lightblue;
  max-width: 350px;
}

.formControlBlock label {
  font-weight: 600;
  color: black;
}

.formControlBlock input,
.formControlBlock textarea {
  width: calc(100% - 10px);
}

.formControlBlock label,
.formControlBlock input,
.formControlBlock textarea {
  display: block;
}

button[type="submit"] {
  display: block;
  margin: 5px auto;
  padding: 10px;
  border-radius: 5px;
  font-size: 1.2em;
  background-color: forestgreen;
  color: white;
  text-transform: uppercase;
  border: none;
}

button[type="submit"]:not([disabled]):active {
  border: 3px solid black;
}

button[type="submit"][disabled] {
  background-color: grey;
}

.ng-invalid:not(form) {
  border: 2px solid red;
  border-radius: 3px;
}

.error-block {
  padding: 10px;
  background-color: red;
  font-weight: bold;
  color: white;
  text-align: center;
}


.bordered-div {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  font-size: 16px;
  margin: 20px;
  max_width: 400px;
}

The app works but the display is not correct - the form fields are not centered and even overlap on an iPhone screen, as I saw in Google Chrome :

My max-width: 350px; is ignored. How can I fix this display and make everything well-centered ?