HTML form input moves when i add a border to the text box in CSS -

i add border input fields on login form, when add border:1px solid black; #login-form input of text boxes move out of position.

here looks without border : http://imgur.com/mjxjf3w

here border : http://imgur.com/yt9h2nr

when user inputs incorrect credentials form message displayed above form, causes form change position, happens when there no border applied inputs.

here screen shot of : http://imgur.com/c3frc0z

i have tried clearing floats did not make difference:

here html:

<div class="sign_in_header">         <div class="sign_in">sign in</div><div class="sign_up">&nbsp;&nbsp;or&nbsp;<a href="register.php">sign up</a></div>     </div>     <div class="sign_in_text">         sign in account      </div>  <div id="login_error"></div>  <div id="login-form">     <form method="post">         <div id="login_form_input">         <label>email:</label><input align="right" text="email" name="email" required />         <br>         <label>password:</label><input type="password" name="pass" required />         </div>         <button type="submit" name="btn-login">log in</button>         <div class="sign_up_label"><a href="register.php">not registered ?</a></div>     </form> </div> 

here css:

.sign_in_header {      margin-top:40px;     width:100%;     border-bottom:1px solid #aaa;     line-height:30px; } .sign_in, .sign_up{     font-size:20px;     color:#000000;     font-family: 'roboto', sans-serif;       font-weight:300;     display:inline-block; }  .sign_up {     font-size:14px; }  .sign_up {     text-decoration: none;     color:#0790cb; }  .sign_up a:hover {     text-decoration: underline; }  .sign_in_text {     margin-top:20px;     font-family: 'roboto', sans-serif;       font-weight:500;     font-size:16px; }  #login-form {      margin-top:20px; }  #login-form label {     float: left;     width: 150px;     text-align: right;     margin-right: 0.5em;     margin-bottom:15px;     font-size:13px;     line-height:30px;  }  #login-form input {     width:250px;     height:25px;     margin-bottom:15px;     clear:both;  }   #login-form button {   -webkit-border-radius: 2;   -moz-border-radius: 2;   border-radius: 2px;   border:none;     font-family: 'roboto', sans-serif;     color: #ffffff;   font-size: 14px;   background: #004d6e;   padding: 8px 20px 8px 20px;   text-decoration: none;     display:inline-block;  }  #login-form button:hover {   background: #343434;   text-decoration: none; }  .sign_up_label {      display:inline-block;     margin-left:20px;     font-size:12px;     font-weight:300;     font-family: 'roboto', sans-serif;   } 

if please able update code solution , possibly explain how issue fixed - appreciated.

many in advance.

i increase margin bottom in #login-form input , add border in this.

  margin-top:40px;      width:100%;      border-bottom:1px solid #aaa;      line-height:30px;  }  .sign_in, .sign_up{      font-size:20px;      color:#000000;      font-family: 'roboto', sans-serif;        font-weight:300;      display:inline-block;  }    .sign_up {      font-size:14px;  }    .sign_up {      text-decoration: none;      color:#0790cb;  }    .sign_up a:hover {      text-decoration: underline;  }    .sign_in_text {      margin-top:20px;      font-family: 'roboto', sans-serif;        font-weight:500;      font-size:16px;  }    #login-form {       margin-top:20px;  }    #login-form label {      float: left;      width: 150px;      text-align: right;      margin-right: 0.5em;      margin-bottom:15px;      font-size:13px;      line-height:30px;    }    #login-form input {      width:250px;      height:25px;     border:1px solid black;      margin-bottom:18px;/*increase margin -bottom*/      clear:both;       }      #login-form button {    -webkit-border-radius: 2;    -moz-border-radius: 2;    border-radius: 2px;    border:none;      font-family: 'roboto', sans-serif;      color: #ffffff;    font-size: 14px;    background: #004d6e;    padding: 8px 20px 8px 20px;    text-decoration: none;      display:inline-block;    }    #login-form button:hover {    background: #343434;    text-decoration: none;  }    .sign_up_label {       display:inline-block;      margin-left:20px;      font-size:12px;      font-weight:300;      font-family: 'roboto', sans-serif;    }

<div class="sign_in_header">          <div class="sign_in">sign in</div><div class="sign_up">&nbsp;&nbsp;or&nbsp;<a href="register.php">sign up</a></div>      </div>      <div class="sign_in_text">          sign in account       </div>    <div id="login_error"></div>    <div id="login-form">      <form method="post">          <div id="login_form_input">          <label>email:</label><input align="right" text="email" name="email" required />          <br>          <label>password:</label><input type="password" name="pass" required />          </div>          <button type="submit" name="btn-login">log in</button>          <div class="sign_up_label"><a href="register.php">not registered ?</a></div>      </form>  </div>