Why does display flex alter the width of this form?

Question

I am developing this registration form that I created using CSS and Bootstrap 4 and I want to center it vertically using flexbox but when using display: flex; on the body tag, it changes and shrinks the width of the form. Is there a way to vertically center it using flexbox or any other way to make it responsive on all devices?

@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allison&display=swap');
body {
  background-color: rgb(240, 242, 245);
  font-family: 'Nunito', sans-serif;
  height: 100vh;
}

form {
  max-width: 30rem;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
}

#logo {
  font-family: 'Allison', 'Nunito';
  font-size: 5rem;
}

input {
  border-radius: 5px;
  border: 1px solid rgb(225, 225, 225);
  transition: all 250ms;
}

input:hover {
  box-shadow: 0px 0px 15px 1px rgb(0 0 0 / 10%);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="./css/login.css">
  <script src="./scripts/validation.js"></script>
  <title>Curious</title>
</head>

<body>
  <form class="mx-auto pb-4 px-4 d-flex flex-column text-center bg-white" name="register" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
    <h1 id="logo">Curious</h1>
    <div class="container-flex d-flex flex-column">
      <input class="my-3 py-1 text-center" type="text" name="username" placeholder="USERNAME">
      <input class="my-3 py-1 text-center" type="password" name="password" placeholder="PASSWORD">
      <input class="my-3 py-1 text-center" type="password" name="confirm_password" placeholder="CONFIRM PASSWORD">
      <input class="my-3 py-1 text-center" type="email" name="email" placeholder="EMAIL">
      <input class="my-3 py-1 text-center" type="tel" name="contact" placeholder="CONTACT NO.">
    </div>
    <div class="mt-4">
      <button class="btn btn-primary" type="button" onclick="validateRegistrationData()">REGISTER</button>
    </div>
    <div class="mt-3">
      <span>Already have an account? <a href="./sign_in.php">Sign In</a></span>
    </div>
  </form>
</body>

</html>

Why does display flex alter the width of this form?

0 Answers0