Vertical Alignment Of Checkboxes Using CSS - css

Question

Working on converting some of the forms on our website to be housed within our new emailing platform (Pardot, a part of Salesforce). Using their CSS editor to create the forms, but I don't have much experience in CSS. I got all the labels for a checkbox to align vertically, but they're in a diagonal line instead of a vertical line. Any tips on how to fix that?
I also attached an image of what the form looks like on the website.
Here's the CSS:
pardot-form input[type="checkbox"] {
background-color: #fff;
color: #666;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 1.75em;
height:18px;
width:18px;
padding:0;
margin-top:5px;
display:block;
float:left;
}

Answer 1

Will this work for you? I pulled some basic form elements from an existing Pardot form.
form.form input[type="checkbox"] {
background-color: #fff;
color: #666;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 1.75em;
height: 18px;
width: 18px;
padding: 0;
margin-top: 5px;
display: inline;
}
<form class="form">
<p class="form-field company col-sm-12 Main_Alarm_Equipment_Used pd-checkbox required required-custom ">
<label class="field-label" for="1">Which mailing lists would you like to sign up for? (Check all that apply)*</label>
<span class="value"> <span>
<input type="checkbox" name="2" id="2" value="598212" onchange="">
<label class="inline" for="2">General Information</label>
</span> <span>
<input type="checkbox" name="3" id="3" value="598214" onchange="">
<label class="inline" for="3">Membership</label>
</span> <span>
<input type="checkbox" name="4" id="4" value="598216" onchange="">
<label class="inline" for="4">Alumni</label>
</span> <span>
<input type="checkbox" name="5" id="5" value="598218" onchange="">
<label class="inline" for="5">Show</label>
</span> <span>
<input type="checkbox" name="6" id="6" value="598220" onchange="">
<label class="inline" for="6">Band</label>
</span> </span> </p>
</form>