title: Div tag margin not working
body: <p>Designing the facebook login page for practise using only html and css.But Here I'm facing some problem.Don't know what it is.Here I want to decrease the top margin of class "loginArea" but cant do it.So the facebook logo is okey but the login area is totally different from the genuine facebook page.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    font-family: arial;
  }
  
  .logoArea {
    height: 35px;
    width: 100px;
    background: url(media/6cVHHozUQSt.png) no-repeat;
    display: inline-block;
    overflow: hidden;
    margin: 40px 40px 0 200px;
  }
  
  .mainArea {
    max-width: 1600px;
    margin: auto;
  }
  
  header.mainHeader:after {
    content: "";
    display: block;
    clear: both;
  }
  
  header.mainHeader {
    background: #3a5797;
    padding: 10px 0;
    color: #fff;
  }
  
  .mainHeader .logoArea {
    width: 50%;
    float: left;
  }
  
  .mainHeader .loginArea {
    float: right;
    width: 50%;
  }
  
  .loginArea .userName,
  .loginArea .password {
    width: 40%;
    float: left;
  }
  
  .loginArea input[type="text"],
  .loginArea input[type="password"] {
    width: 60%;
    padding: 2px;
    border-width: 1px;
    border-color: #29487d;
    margin-bottom: 5px;
  }
  
  .loginArea .submitButton {
    width: 20%;
    float: left;
  }
  
  .loginArea label {
    font-size: 12px;
  }
  
  label[for="keepLogin"],
  .loginArea a {
    font-size: 12px;
    color: #9CABC6;
  }
  
  #keepLogin {
    margin: 0;
  }
  
  .submitButton input {
    background: #3B5998;
    color: #fff;
    font-weight: bold;
    margin-top: 20px;
    border-width: 1px;
    border-color: #29487d;
    padding: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en-US"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Facebook- Log In or Sign Up&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css" media="all" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header class="mainHeader"&gt;
      &lt;div class="mainArea"&gt;
        &lt;div class="logoArea"&gt;
          &lt;img id="logo" src="media/6cVHHozUQSt.png" alt="" /&gt;
        &lt;/div&gt;
        &lt;div class="loginArea"&gt;
          &lt;form action="#"&gt;
            &lt;div class="userName"&gt;
              &lt;label for="user"&gt;Email or Phone &lt;/label&gt; &lt;br/&gt;
              &lt;input type="text" id="user" /&gt;&lt;br/&gt;
              &lt;input type="checkbox" id="keepLogin" /&gt;
              &lt;label for="keepLogin"&gt; Keep me Logged In&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="password"&gt;
              &lt;label for="password"&gt;Password &lt;/label&gt;&lt;br/&gt;
              &lt;input type="password" id="password" /&gt;&lt;br/&gt;
              &lt;a href="#"&gt;Forgotten you password?&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="submitButton"&gt;
              &lt;input type="submit" value="Log In" /&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>