Left align form labels and space out input elements - html

Question

I'm struggling to left align the labels on my form and space out the input and button element/s. Can anyone offer any advice on how I can get it done, while keeping the input elements centred?
CSS code:
.bt input {
border: 1px solid #ccc;
color: rgb(60, 60, 60);
display: block;
width: 80%;
padding: 1em;
margin: 0 auto;
}
.bt button {
width: 100%;
padding: 1.5em;
background-color: #1f1f1f;
color: #fff;
border: 0;
}
.bt button:hover {
background-color: #818181;
cursor:pointer;
}
.fbc {
text-align: center;
}
.bt .fb {
background-color: #D5D5D5;
padding: 2em;
color: #585858;
display: inline-block;
width: 50%;
}
HTML code:
<div class="bt fbc">
<div class="fb">
<label>Name (Required)
<input type="text" placeholder="Name" required autofocus>
</label>
<label>Email (Required)
<input type="text" placeholder="example#domain.com" required autofocus>
</label>
<button>SUBMIT BOOKING</button>
</div>
</div>
Jsfiddle: http://jsfiddle.net/r11qv9kh/1/

Answer 1

Define new styles for labels:
.bt label {
margin-bottom: 1em;
display: block;
box-sizing: border-box;
padding: 0 10%;
text-align: left;
}
and change width styles for inputs:
.bt input {
...
width: 100%;
box-sizing: border-box;
}
And in this case you don't have to modify HTML.
Demo: http://jsfiddle.net/r11qv9kh/3/light/

Answer 2

Your labels are inline elements, and therefore will get their text alignment from their parent element. You can give them a block display and assign their text alignment directly to get them going left.
HTML:
<label for="name">Name (Required)</label>
<input id="name" type="text" placeholder="Name" required autofocus>
CSS:
.bt label {
text-align: left;
display: block;
}
Fiddle: http://jsfiddle.net/r11qv9kh/2/

Answer 3

This will align your labels to the left:
Text-align: left;