Aligning check box's next to text - html

Question

I'm trying to make my check boxes align and stack such as http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_checkbox for example.
The page that I'm working on is http://juniorgoldreport.com/landing-page/
I've tried to use display: inline; and text-align: left; as well as float: left;. I'm not sure how to go about fixing this. The class chk_bx is there only because I was trying my best to try and target just that section of the form.
This is my html:
<form action="action_page.php">
<fieldset>
<div id="form_jgrsh">
First name:<br>
<input type="text" name="firstname" placeholder="Please enter first name">
<br>
Last name:<br>
<input type="text" name="lastname" placeholder="Please enter last name">
<br>
Email:<br>
<input type="text" name="email" placeholder="Please enter email">
<br><br>
<div class="chk_bx">
<input type="checkbox" name="sub_list" value="SH">Subscribe me to Stockhouse
<br>
<input type="checkbox" name="sub_list" value="JGR">Subscribe me to Junior Gold Report
</div>
<input type="submit" value="Submit">
</div>
</fieldset>
</form>
css
#form_jgrsh {
width:300px;
margin:0 auto;
text-align:left;
}
#form_jgrsh .chk_bx{
}
#form_jgrsh input, textarea {
width:100%;
border: 2px solid black;
line-height: 30px;
}
.exc-form {
text-align:center;
}

Answer 1

Problem is width:100%. give width to checkbox
#form_jgrsh {
width:300px;
margin:0 auto;
text-align:left;
}
#form_jgrsh .chk_bx{
}
#form_jgrsh input, textarea {
width:100%;
border: 2px solid black;
line-height: 30px;
}
.exc-form {
text-align:center;
}
.chk_bx input {
width:20px !important;
}
<form action="action_page.php">
<fieldset>
<div id="form_jgrsh">
First name:<br>
<input type="text" name="firstname" placeholder="Please enter first name">
<br>
Last name:<br>
<input type="text" name="lastname" placeholder="Please enter last name">
<br>
Email:<br>
<input type="text" name="email" placeholder="Please enter email">
<br><br>
<div class="chk_bx">
<input type="checkbox" name="sub_list" value="SH">Subscribe me to Stockhouse
<br>
<input type="checkbox" name="sub_list" value="JGR">Subscribe me to Junior Gold Report
</div>
<input type="submit" value="Submit">
</div>
</fieldset>
</form>

Answer 2

Change this line here:
// First line
#form_jgrsh input[type="text"], textarea {
width:100%;
border: 2px solid black;
line-height: 30px;
}
You were setting all inputs to width: 100% which was pushing the text below the checkboxes. Only set it to to type="text" inputs.
Fiddle: https://jsfiddle.net/xa5fv1p0/

Answer 3

Your problem is that you have width:100% assigned to all input fields, which is causing the checkboxes to take up the entire width.
Assign a class to the checkboxes and overwrite the width attribute like so:
#form_jgrsh .checkbox {
width: auto;
}
Fiddle: https://jsfiddle.net/yhc4rujh/