title: How do I make this login form smaller?
body: <p>I have a login form on my website that I'm currently working on. The problem is that the whole thing is just to big. It is placed in the top right corner of my page, with the header in the middle and the menubar on the left upper corner.  Compared to the header and menubar it takes up to much space. I've fiddled with the css and html code for a while now, but I can't figure out how to make the "fields" or boxes where you write password and username smaller. Any suggestions? </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>    form {
       float:right;
       font-family: Arial, Helvetica, sans-serif;
      }
      
      .login {
       position: absolute;
       top: 10px;
       right: 25px;
       font-size: 50%;
       display: inline-block;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;form&gt;
      &lt;span class='login'&gt;
      
      &lt;label for="E-mail"&gt;E-mail&lt;/label&gt;
      &lt;input name="Email" placeholder="E-mail" id="E-mail" /&gt;
      
      &lt;label for="Password"&gt;Password&lt;/label&gt;
      &lt;input type="password" placeholder="Password" id="Password" /&gt;
      
      &lt;input type="submit" value="Log in" /&gt;
      &lt;/span&gt; 
      &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>