Can someone help me troubleshoot an issue with my sign-in form? I can't seem to get the remember me checkbox aligned to the left, it keeps centering in the middle of the form. Any advice on what might be causing this?
On a side note, I'm also curious why my submit button is not the same size as the other input text boxes. Is there a specific reason for this discrepancy?
#sign-in-form {
width: 400px;
height: auto;
padding: 50px 30px;
margin: auto;
border-radius: 3px;
background: rgba(115,155,175,0.2);
}
#sign-in-form input {
width: 100%;
padding: 8px 6px;
margin: 22px auto;
display: block;
font-size: 1.4em;
border-radius: 3px;
border: none;
}
#sign-in-form input[type="checkbox"] {
padding: 7px;
text-align: left;
}
#sign-in-form input[type="submit"] {
background: #4FCBFE;
color: #FFF;
border: none;
border-radius: 3px;
}<div id="sign-in-form">
<input type="text" name="username" placeholder="User Name" autocomplete="on" required>
<input type="password" name="password" placeholder="Password" autocomplete="off" required>
<label><input type="checkbox" name="remember" id="remember">Remember me</label>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<input type="submit" value="Sign In">
</div>