Take a look at my login-form (here). I am having an issue where the Text-Field is not aligning properly with the login field - it seems to be shifted 10px to the left and right (margin). Can anyone point out what mistake I might have made? Your help would be highly appreciated. Thank you!
Codes: Markup:
<div class="sidebar">
<div class="widget">
<h1>Login</h1>
<form class="login_form">
<p>
<label for="auth_id">Auth-Id:</label>
<input id="auth_id" type="text" name="auth_id">
</p>
<p>
<input type="submit" value="Login" class="submit">
</p>
</form>
</div>
</div>
CSS:
.sidebar {
float: left;
width: 200px;
}
.sidebar .widget {
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #0b145f;
margin-left: 20px;
background-color: #f8f8fe;
-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.8), 0px 3px 0px -2px rgba(0,0,0,0.1);
box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.8), 0px 3px 0px -2px rgba(0,0,0,0.1);
}
.sidebar .widget h1 {
font-family: 'Quicksand';
margin: 13px 10px 5px;
padding-bottom: 10px;
border-bottom: 1px dotted #0b145f;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
margin-bottom: 10px;
}
.sidebar .widget p {
margin: 0;
padding: 0;
}
.sidebar .widget .login_form label {
margin: 10px 10px 0 10px;
display: block;
}
.sidebar .widget .login_form input {
margin: 10px 10px 0 10px;
padding: 10px;
}