Aligning Span Fields to the Left while Aligning Form Center - html

Question

I am having an issue where I am using text-align on my container to center all of the content within it, but would like to align my <span> elements to the left within that centered container. I have tried isolating the span elements in my css and using text-align: left; but have not had any success. I feel like it is a simple fix that is slipping my mind at the moment, but hope that it can be easily resolved.
HTML:
<div class="grid">
<div class="col-1-1" id="bar-registration-container">
<h1>Register</h1>
<div id="form-fields">
<form>
<label class="form-label" id="email">
<span>Email</span>
<br />
<input id="email" type="email" name="email" />
</label>
<br />
<label class="form-label" id="password">
<span>Password</span>
<br />
<input id="password" type="password" name="password" />
</label>
<br />
<label>
<input class="form-label" id="submit" type="submit" value="Register" />
</label>
</form>
</div>
</div>
</div>
CSS:
#bar-registration-container h1{
text-align: center;
}
#form-fields {
text-align: center;
background-color: #fff;
margin: 0 auto;
padding: 20px;
}
#form-fields input[type=email] {
font-size: 27px;
margin-bottom: 20px;
}
#form-fields input[type=password] {
font-size: 27px;
margin-bottom: 10px;
}
.form-label span {
color: #000;
margin-right: 10px;
}
#submit {
margin-top: 20px;
width: 300px;
height: 30px;
background-color: #000;
color: #fff;
font-size: 15px;
border: none;
}

Answer 1

I believe this snippet accomplishes what you want. I just gave the form-fields div a set width, and added a few styles to those span elements to get them to stretch the full width of that div, but be left-aligned.
#bar-registration-container h1{
text-align: center;
}
#form-fields {
width: 340px;
text-align: center;
background-color: #fff;
margin: 0 auto;
padding: 20px;
}
#form-fields input[type=email] {
font-size: 27px;
margin-bottom: 20px;
}
#form-fields input[type=password] {
font-size: 27px;
margin-bottom: 10px;
}
.form-label span {
display: inline-block;
text-align: left;
color: #000;
width: 100%;
margin-left: 5px;
}
#submit {
margin-top: 20px;
width: 300px;
height: 30px;
background-color: #000;
color: #fff;
font-size: 15px;
border: none;
}
<div class="grid">
<div class="col-1-1" id="bar-registration-container">
<h1>Register</h1>
<div id="form-fields">
<form>
<label class="form-label" id="email">
<span>Email</span>
<br />
<input id="email" type="email" name="email" />
</label>
<br />
<label class="form-label" id="password">
<span>Password</span>
<br />
<input id="password" type="password" name="password" />
</label>
<br />
<label>
<input class="form-label" id="submit" type="submit" value="Register" />
</label>
</form>
</div>
</div>
</div>

Answer 2

In order to left align your <span> you need to left align them and in edition to that you will have to use display:block. You actually were on right track you just missed display:block. Using display:block will make your <span> to act as a block element like <div> or <p> and then it will respect alignment properties better.
span{
text-align:left;
display:block;
margin-left:50px;// adjust yourself. Was just playing around with it.
}