Aligning list of items

[cainy1989]

I'm having a problem getting the text that goes with a list of items - each preceded by a letter - on an online questionnaire to align properly. In other words, I have a list that looks like this (using the letter 'o' to represent radio buttons), where with letters such as f, i, j, etc., the radio button and accompanying text are shifted slightly but noticeably to the left: \[code\]a. o Yes o No Asbestosis b. o Yes o No Asthma c. o Yes o No Chronic bronchitis d. o Yes o No Emphysema e. o Yes o No Pneumonia f. o Yes o No Tuberculosis \[/code\]Here is the HTML code, leaving out the code for items b, c, d and e for brevity's sake.\[code\]<div id="question20" class="indent" style="display:block;line-height:15px"> <span class="num-bullet">3</span>Have you <em><b>ever had</b></em> any of the following pulmonary or lung problems? <p class="p1">a. <input type="hidden" xmlTag="asbestosis" is_required='yes' id="question20a" name="question20a" number="20" prerequisite="0" section="Part A. Section 2." description="3.a. Have you had asbestosis?" /> <input type="radio" id="20y" name="20" value="http://stackoverflow.com/questions/15620031/Yes" style="padding-left:5em"/>Yes <input type="radio" id="20n" name="20" value="http://stackoverflow.com/questions/15620031/No"/>No Asbestosis </p> <div id="div_explanation20" class="indent" style="display:none;padding-left:60px"> <input type="text" id="explanation20" name="explanation20" number="20" xmlTag="asbestosis_explanation" size="40" maxlength="40" value="http://stackoverflow.com/questions/15620031/Please explain" text_label="Please explain" section="Part A. Section 2." description="3.a. Have you had asbestosis?" /><br /> </div> <p class="p1">f. <input type="hidden" xmlTag="tuberculosos" is_required='yes' id="question28" name="question28" number="28" section="Part A. Section 2." description="3.i. Have you had tuberculosis?" /> <input type="radio" id="28y" name="28" value="http://stackoverflow.com/questions/15620031/Yes" style="padding-left:5em"/>Yes <input type="radio" id="28n" name="28" value="http://stackoverflow.com/questions/15620031/No"/>No Tuberculosis </p> <div id="div_explanation28" class="indent" style="display:none;padding-left:60px"> <input type="text" id="explanation28" name="explanation28" number="28" xmlTag="tuberculosis_explanation" size="40" maxlength="40" value="http://stackoverflow.com/questions/15620031/Please explain" text_label="Please explain" section="Part A. Section 2." description="3.i. Have you had tuberculosis?" /><br /> </div>\[/code\]Here is what I believe to be the applicable CSS code: \[code\]span.num-bullet { display:block; float:left; width:15px; line-height:15px; text-align:center; color:#00588a; font-size:11px; font-weight:bold; background:url(../img/numbered-bullet.gif) no-repeat; margin-right:10px;} p.p1 {text-indent:30px} form div.group div.indent {margin-left:30px; clear:left;} \[/code\]I'm in no way a CSS expert; novice at best. Much of this was provided by a co-worker. Thanks!JSFiddle