Login Form Style - css

Question

I am trying to build a login form, however the submit button, remember me checkbox, and remember me label are not being properly formatted. Currently, the label is on the left, and then the submit button and checkbox. I would like it so that the label and checkbox appear after the submit button. I am using Jade for the template engine. I would also like the solution to work properly on mobile browsers.
Jade
doctype html
html
head
title
| Log In
meta(charset = "UTF-8")
meta(name = "viewport" content = "width = device-width, initial-scale = 1.0")
link(rel = "stylesheet", href="/stylesheets/login.css")
body
form#logIn(name = "logIn", method = "post", action = "/login")
p#loginMessage Title
label(for = "handle") Username:
input#handle(type = "text", required = "required", name = "handle" maxlength = "20" value = handle)
br
br
label(for="pass") Password:
input#password(type = "password", required = "required", maxlength = "60" name = "pass")
br
br
div#submitDiv
button#submit(name = "submit") SUBMIT!
label#rememberMe(for = "rememberMeCheckbox") Remember Me:
input#rememberMeCheckbox(type = "checkbox", name = "remember")
br
br
div#errorMessage #{errorMessage}
CSS
#loginMessage {
font-size: 30px;
text-align: center;
color: #FFFFFF;
}
form {
font-weight: bold;
font-family: courier;
font-size: .875em; /*14*/
margin: auto;
width: 90%;
height: 80%;
border: 1px solid #FBFF06;
background: #EFBA00;
-webkit-border-radius: 3.125em; /*50*/
-moz-border-radius: 3.125em;
border-radius: 3.125em;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
}
label {
display: block;
float: left;
width: 15%;
padding-left: 3%;
padding-right: 3%;
}
input[type="text"], input[type="password"] {
width: 50%;
}
#errorMessage {
font-weight: bold;
font-family: courier;
font-size: 1em;
text-align: center;
}
div#submitDiv {
text-align: center;
display: inline;
}
button#submit {
width: 10%;
background: #FBFF06;
color: #000000;
border: 2px solid #BC8507;
height: 25px;
font-weight: bold;
}
label#rememberMe {
width: 15%;
}
input#rememberMeCheckbox {
width: 10px;
margin: 0 auto;
}

Answer 1

Your label has a float: left style applied to it which is why it's not displaying in the same order as your HTML.
You need to remove the float for just that label and display it as inline to keep everything all on the same line.
label#rememberMe {
width: 10%;
float: none;
display: inline;
}
Check this fiddle: http://jsfiddle.net/ap68p5zg/1/
I also added a min-width to your Submit button so it won't cut off the text and a margin for alignment.
button#submit {
width: 10%;
background: #FBFF06;
color: #000000;
border: 2px solid #BC8507;
height: 25px;
font-weight: bold;
margin-left: 3%;
min-width: 75px;
}