title: Labels not aligned on top left side above text inputs
body: <p>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.</p>
  <p><a href="https://i.stack.imgur.com/A9U2G.png" rel="nofollow noreferrer">The output that I want</a></p>
  <p><a href="https://i.stack.imgur.com/QGHcs.png" rel="nofollow noreferrer">The output I'm getting</a></p>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;account-form&quot;&gt;
        &lt;form action=&quot;/account-sign-up&quot;&gt;
          &lt;div&gt;
            &lt;label for=&quot;first&quot;&gt;First Name&lt;/label&gt;
            &lt;input
              id=&quot;first&quot;
              type=&quot;text&quot;
              placeholder=&quot;e.g. Wan&quot;
              name=&quot;first&quot;
              required
            /&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
            &lt;label for=&quot;last&quot;&gt;Last Name&lt;/label&gt;
            &lt;input
              id=&quot;last&quot;
              type=&quot;text&quot;
              placeholder=&quot;e.g. Aiman&quot;
              name=&quot;last&quot;
              required
            /&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
            &lt;label for=&quot;email&quot;&gt;Email&lt;/label&gt;
            &lt;input
              id=&quot;email&quot;
              type=&quot;email&quot;
              placeholder=&quot;e.g. wanaiman@gmail.com&quot;
              name=&quot;email&quot;
              required
            /&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
            &lt;label for=&quot;password&quot;&gt;Password&lt;/label&gt;
            &lt;input
              id=&quot;password&quot;
              type=&quot;password&quot;
              placeholder=&quot;Must be 9-20 characters&quot;
              name=&quot;password&quot;
              minlength=&quot;9&quot;
              maxlength=&quot;20&quot;
              required
            /&gt;
          &lt;/div&gt;
  
          &lt;input type=&quot;submit&quot; value=&quot;Sign in&quot; /&gt;
  
          &lt;div id=&quot;account-extra&quot;&gt;
            Already have an account?
            &lt;a href=&quot;sign-in.html&quot; id=&quot;account-link&quot;&gt;Sign In&lt;/a&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.account-form {
    margin-top: 55px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  label {
    color: white;
    display: block;
    margin-top: 30px;
    font-family: &quot;Epilogue&quot;, 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=&quot;submit&quot;] {
    display: block;
    color: white;
    background-color: black;
    font-family: &quot;Epilogue&quot;, sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin-top: 40px;
  }
  
  input[type=&quot;submit&quot;]:hover {
    color: black;
    background-color: #f0f3ff;
  }
  
  #account-extra {
    font-family: &quot;Epilogue&quot;, sans-serif;
    color: white;
    margin-top: 30px;
  }
  
  #account-extra a {
    color: white;
    text-decoration: none;
    font-weight: 900;
  }
  </code></pre>