title: Centering input in a div
body: <p>What is causing that one pixel at the top (red and blue highlight) and on the side?</p>
  <p>and I'm not missing a div at the bottom, SO is just removing it, not sure why</p>
  <p>border-box helps a bit, but it is still 1pm from the top, despite there not being any margins.</p>
  <p>Pastebin link of the full file <a href="https://pastebin.com/N5tGBX9X" rel="nofollow noreferrer">https://pastebin.com/N5tGBX9X</a></p>
  <p><a href="https://i.stack.imgur.com/rWWeD.png" rel="nofollow noreferrer">imgur link</a></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>.outercontainer{
      width:320px;
      height: 96px;
      /*border: 1px dashed black;*/
      margin: 0 auto;
  }
  
  .namelabel{
      width: 30%;
      float: left;
      background-color: red;
      height: 100%;
  }
  .passwordlabel{
      width: 30%;
      float: left;
      background-color: blue;
  }
  
  input[type=text], input[type=password]{
      width: 70%;
      float: right;
      color:aqua;
      box-sizing: border-box;
      padding: 0px;
  }
  
  .loginbutton{
      text-align: center;
      box-sizing: border-box;
      margin: 0 auto;
  }
  
  /*Centers content into the middle of the screen*/
  .center-screen {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      min-height: 80vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="center-screen"&gt; 
  &lt;div class="outercontainer"&gt;
      &lt;form method="POST" action="#"&gt;
          &lt;div style="box-sizing: border-box; border: 1px red solid; margin-bottom: 32px;"&gt;
              &lt;label class="namelabel" for="email"&gt;&lt;b&gt;Email&lt;/b&gt;&lt;/label&gt;
              &lt;input class="inputbox" type="text" placeholder="" name="email" required&gt;&lt;/input&gt;
          &lt;/div&gt;
  
          &lt;div style="box-sizing: border-box; border: 1px solid blue; margin-bottom: 32px;"&gt;
              &lt;label class="passwordlabel" for="pswd"&gt;&lt;b&gt;Password&lt;/b&gt;&lt;/label&gt;
              &lt;input class="inputbox" type="password" placeholder="" name="pswd" required&gt;&lt;/input&gt;
          &lt;/div&gt;
  
          &lt;div class="loginbutton"&gt;
              &lt;button type="submit" name="loginSubmit"&gt;Log In&lt;/button&gt;
          &lt;div&gt;
      &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>