html - Input boxes not lining up -

i'm new html , last time i've been editing code found input boxes don't align perfectly. want them in line on right. here code:

input  {   margin: auto;    padding: 25px;    font: normal 15px verdana, tahoma, sans-serif;    width: 100%;   border-left: 0;   border-right: 0;   border-top: 0;   border-bottom: solid 3px #66004c;    background: #cdcdcd;   }

<div style="float: left; position: relative; left: 50%;">  	<div style="float: left; position: relative; left: -50%;">	  		<form action="" method="post">   			<input type="text" name="username" placeholder="username">   			<input type="password" name="password" placeholder="password">   			<input type="submit" value="log in" style="background: #66004c; color: #efefef;"><br>  			<input type="submit" value="don't have account yet? register!" onclick="window.location='/register.php';" style="border-bottom: 	solid 5px #66004c;"/>    		</form> 	  	</div>  </div>

also searched web found no right answer..

thanks in advance.

add css3 box-sizing property in stylesheet.

* {   box-sizing: border-box; }