title: How to align <div> elements perfectly?
body: <p>I'm trying to mimic Facebook's homepage to enhance my skills, but I'm having a hard time trying to align the username and password box perfectly to each other, here is what it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/8RU7F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8RU7F.png" alt="my header picture"></a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;body&gt;
       &lt;div id="top_banner"&gt;
           &lt;div id="header"&gt;
                &lt;h1&gt;facebull&lt;/h1&gt;
           &lt;/div&gt;
           &lt;div id="login_info"&gt;
               &lt;div id="username_group"&gt;
                  &lt;label for="username_field"&gt;Email or Phone?&lt;/label&gt;
                  &lt;input type="text" id="username_field"&gt;
               &lt;/div&gt;
               &lt;div id="password_group"&gt;
                  &lt;label for="password_field"&gt;Password&lt;/label&gt;
                  &lt;input type="text" id="password_field"&gt;
                  &lt;label&gt;Forgot account?&lt;/label&gt;
               &lt;/div&gt; 
          &lt;/div&gt; 
      &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>*{
      margin:0px;
      padding:0px;
  }
  
  input, label{
      display:block;
  }
  
  #top_banner{
      background-color:#3b5998;
      color: #fff;
      width:100%;
      height: 100px;
  }
  
  #header{
      line-height: 100px;
      position: absolute;
      margin-left: 100px;
      }
  
  #password_group{
      margin-left: 80%;
  }
  
  #username_group{
       margin-left: 70%;
  }
  
  #container{
      background-color: #e9ebee;
  }
  </code></pre>
  
  <p>I already tried using <code>margin-top and line-height</code> on #username_group but it doesn't work. Also, what are some ways I can make my code more efficient?</p>