title: Can't display form border properly
body: <p>i'm not very familiar with CSS, i'm trying to apply a border on my login form, here is the code i use:</p>
  
  <p>login.html:</p>
  
  <pre><code>&lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;/head&gt;
  
  &lt;div id="login_container"&gt;
      &lt;form action="#" method="POST"&gt;
          &lt;div class="row"&gt;
              &lt;label for="username" class="label"&gt;Username&lt;/label&gt;
              &lt;input type="text" class="field" name="username" /&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;label for="password" class="label"&gt;Password&lt;/label&gt;
              &lt;input type="password" class="field" name="password" /&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css/style.css:</p>
  
  <pre><code>#login_container {
      margin-top:50px;
      margin-left: auto;
      margin-right: auto;
      width: 300px;
      border:1px solid black;
      display:block;
  }
  
  .field {
      float:right;
      margin-left: 10px;
  }
  
  label {
      float:left;
  
  }
  
  .row{
      display:block;
      clear:both;
  }
  </code></pre>
  
  <p>and the output:</p>
  
  <p><img src="https://i.stack.imgur.com/eKlT6.png" alt="The output of the previous code"></p>
  
  <p>Why does the border cross the password text field?</p>
  
  <p>EDIT:</p>
  
  <p>with 
      form{
      border:1px solid black;
      }</p>
  
  <p>the output is:</p>
  
  <p><img src="https://i.stack.imgur.com/3djfE.png" alt="Output with form border instead og #login_container border"></p>