aligning checkboxes with labels

I cant align the checkboxes to their labels, they float one line higher and on mobile they are underneath the label.

Image of the problem

The problem happens on all checkboxes, so when you pick the Primary school teacher option and headteacher from the dropdown.

The link to the page is https://careermapforprimary.co.uk/#register

I've tried to add some CSS but it didn't work.

.mc-field-group input[type="checkbox"] {
vertical-align: middle;
}

any suggestions please?

This is the code to create the form fields, there is no css:

 <div id="conditional-fields-primary-teacher" style="display: none;">
<div class="mc-field-group">
<label for="mce-FNAME">First name <span class="asterisk">*</span></label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME" required>
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last name <span class="asterisk">*</span></label>
<input type="text" value="" name="LNAME" class="required" id="mce-LNAME" required>
</div>
<div class="mc-field-group">
<label for="mce-JOB_TITLE">Job title <span class="asterisk">*</span></label>
<input type="text" value="" name="JOB_TITLE" class="required" id="mce-JOB_TITLE" required>
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
</div>
<div class="mc-field-group">
<label for="mce-REGION">Region <span class="asterisk">*</span></label>
<select name="REGION" class="required" id="mce-REGION" required>
<option value="">Select...</option>
<option value="Bedfordshire">Bedfordshire</option>
<option value="Berkshire">Berkshire</option>
<option value="Bristol">Bristol</option>
<option value="Buckinghamshire">Buckinghamshire</option>
<option value="Cambridgeshire">Cambridgeshire</option>
<option value="Cheshire">Cheshire</option>
<option value="Cornwall">Cornwall</option>
<option value="Cumbria">Cumbria</option>
<option value="Derbyshire">Derbyshire</option>
<option value="Devon">Devon</option>
<option value="Dorset">Dorset</option>
<option value="Durham">Durham</option>
<option value="East Sussex">East Sussex</option>
<option value="Essex">Essex</option>
<option value="Gloucestershire">Gloucestershire</option>
<option value="Greater London">Greater London</option>
<option value="Greater Manchester">Greater Manchester</option>
<option value="Hampshire">Hampshire</option>
<option value="Herefordshire">Herefordshire</option>
<option value="Isle of Wight">Isle of Wight</option>
<option value="Kent">Kent</option>
<option value="Lancashire">Lancashire</option>
<option value="Leicestershire">Leicestershire</option>
<option value="Lincolnshire">Lincolnshire</option>
<option value="Merseyside">Merseyside</option>
<option value="Norfolk">Norfolk</option>
<option value="North Yorkshire">North Yorkshire</option>
<option value="Northamptonshire">Northamptonshire</option>
<option value="Northumberland">Northumberland</option>
<option value="Nottinghamshire">Nottinghamshire</option>
<option value="Oxfordshire">Oxfordshire</option>
<option value="Rutland">Rutland</option>
<option value="Shropshire">Shropshire</option>
<option value="Somerset">Somerset</option>
<option value="South Yorkshire">South Yorkshire</option>
<option value="Staffordshire">Staffordshire</option>
<option value="Suffolk">Suffolk</option>
<option value="Surrey">Surrey</option>
<option value="Tyne and Wear">Tyne and Wear</option>
<option value="Warwickshire">Warwickshire</option>
<option value="West Midlands">West Midlands</option>
<option value="West Sussex">West Sussex</option>
<option value="West Yorkshire">West Yorkshire</option>
<option value="Wiltshire">Wiltshire</option>
<option value="Worcestershire">Worcestershire</option>
</select>
</div>
<div class="mc-field-group">
<label>Year/Group (Tick all that apply):</label>
<div>
<input type="checkbox" name="year-group" value="Reception" id="mce-reception">
<label for="mce-reception">Reception</label>
</div>
<li>
<div>
<input                 type="checkbox" name="year-group" value="Year 1" id="mce-year1">
<label for="mce-year1">Year 1</label>
</div>
</li>
<div>
<input type="checkbox" name="year-group" value="Year 2" id="mce-year2">
<label for="mce-year2">Year 2</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 3" id="mce-year3">
<label for="mce-year3">Year 3</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 4" id="mce-year4">
<label for="mce-year4">Year 4</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 5" id="mce-year5">
<label for="mce-year5">Year 5</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 6" id="mce-year6">
<label for="mce-year6">Year 6</label>
</div>
</div>
</div>

<div class="input-wraper">
  <input class="input" type="checkbox" name="year-group" value="Reception" id="mce-reception">
  <label for="mce-reception" style="display: inline-block">Reception</label>
</div>

.input-wraper {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  margin: 3px 4px 3px 3px;
}
.input {
  vertical-align: middle;
  margin: 0;
}

The problem is here :

#mc_embed_signup .mc-field-group input {
  display: block;
  width: 100%;
  padding: 8px 0;
  text-indent: 2%;
}

Try to remove the width: 100% and turn you're input and label on display: inline-block