Labels not aligned on top left side above text inputs

I’ve been trying to get the labels to be on the left side above the text input, but all I’ve managed to do is make it towards the center instead. What am I doing wrong? Sorry if the way I’m labelling things seem odd, I’m still very new to HTML and CSS.

The output that I want

The output I’m getting

HTML

<div class="account-form">
      <form action="/account-sign-up">
        <div>
          <label for="first">First Name</label>
          <input
            id="first"
            type="text"
            placeholder="e.g. Wan"
            name="first"
            required
          />
        </div>

        <div>
          <label for="last">Last Name</label>
          <input
            id="last"
            type="text"
            placeholder="e.g. Aiman"
            name="last"
            required
          />
        </div>

        <div>
          <label for="email">Email</label>
          <input
            id="email"
            type="email"
            placeholder="e.g. <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6c1d7d8d7dfdbd7d8f6d1dbd7dfda98d5d9db">[email protected]</a>"
            name="email"
            required
          />
        </div>

        <div>
          <label for="password">Password</label>
          <input
            id="password"
            type="password"
            placeholder="Must be 9-20 characters"
            name="password"
            minlength="9"
            maxlength="20"
            required
          />
        </div>

        <input type="submit" value="Sign in" />

        <div id="account-extra">
          Already have an account?
          <a href="sign-in.html" id="account-link">Sign In</a>
        </div>
      </form>
    </div>

CSS

.account-form {
  margin-top: 55px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

label {
  color: white;
  display: block;
  margin-top: 30px;
  font-family: "Epilogue", sans-serif;
  font-weight: 600;
  font-size: 20px;
}

input {
  display: block;
  width: 550px;
  margin: 0 auto;
  background-color: #f0f3ff;
  color: #666666;
  padding: 15px;
  border-radius: 10px;
  border: 2px solid transparent;
  outline: none;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.5s;
}

input:hover {
  background-color: white;
}

input:focus {
  cursor: text;
  color: #303030;
  background-color: white;
  border-color: #303030;
}

input[type="submit"] {
  display: block;
  color: white;
  background-color: black;
  font-family: "Epilogue", sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin-top: 40px;
}

input[type="submit"]:hover {
  color: black;
  background-color: #f0f3ff;
}

#account-extra {
  font-family: "Epilogue", sans-serif;
  color: white;
  margin-top: 30px;
}

#account-extra a {
  color: white;
  text-decoration: none;
  font-weight: 900;
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Make Parent div width to same as your <input> width so that you can use margin:auto to center a div. Finally you can use text-align: left as shown here

.account-form{
  text-align: left; 
  margin: auto; 
  width: 550px;
}

Note: By default it takes text-align: left. I just mentioned because you used text-align: center

Method 2

You can add this piece of code for labels

label {
  color: black;
  text-align:left;
  display: block;
  margin-top: 30px;
  font-family: "Epilogue", sans-serif;
  font-weight: 600;
  font-size: 20px;
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0