Misalignment of page elements

I have this code:

<div class="row" style="padding-top:10px;">
			<div class="col-sm-12 col-xs-12 text-left"><input type="checkbox" name="selall" >&nbsp;<span id="selall" onClick="sel_all();">Select All</span></div>
		</div>
		<div class="row" style="padding-top:10px;">
				
			<div class="row" style="padding-top:10px;">
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="summtr" name="summtr" >&nbsp;<span id="strtxt" onClick="setsummtrcheck();">Summary (Trade Pricing)</span></div>
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="spec" name="spec" >&nbsp;<span id="spectxt" onClick="setspeccheck();">Sample Spec</span></div>
			</div>	
			<div class="row" style="padding-top:10px;">
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="summnt" name="summnt" >&nbsp;<span id="snttxt" onClick="setsummntcheck();">Summary (Net Pricing)</span></div>
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="broc" name="broc" >&nbsp;<span id="broctxt" onClick="setbroccheck();">Product Brochure</span></div>
			</div>	
			<div class="row" style="padding-top:10px;">
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="summnp" name="summnp" >&nbsp;<span id="snptxt" onClick="setsummnpcheck();">Summary (No Pricing)</span></div>
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="draw" name="draw" >&nbsp;<span id="drawtxt" onClick="setdrawcheck();">PDF Drawing File</span></div>
			</div>	

Select allOpen in new window

It produces the output as in the attached image. Why does the "Select All" not align vertically with the checkbox elements underneath? I tried everything I could think of, like text-left, which is superfluous .

Thanks
Misalign.PNG