Onay kutuları doğru şekilde hizalanmamış. Nasıl düzeltilir?

Question

Ekteki resimde görüldüğü gibi onay kutularının yanlış hizalanmasını görebilirsiniz. Düzeltmek için çeşitli yollar denedim ama hiçbir şey işe yaramıyor gibi görünüyor. Hatamı işaret eder misiniz lütfen? Kelimelerin ne kadar büyük olursa olsun onları doğru hizaya getirmelerini istiyorum, çünkü hizalamanın halihazırda kelime boyutuna bağlı olduğunu görebilirsiniz.

Kodu:

.checkbox { 
 
    font: 15px Segoe UI, sans-serif; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    font: 15px; 
 
    margin-right: 250px; 
 
    line-height: 18px; 
 
} 
 
input[type=checkbox] { 
 
    display: none; 
 
} 
 
.checkbox:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 18px; 
 
    height: 18px; 
 
    vertical-align: middle; 
 
    background-color: #0088cc; 
 
    color: #f3f3f3; 
 
    text-align: center; 
 
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
 
    border-radius: 3px; 
 
} 
 
input[type=checkbox]:checked + .checkbox:before { 
 
    content: "\2713"; 
 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); 
 
    font-size: 15px; 
 
}

<form> 
 
    <input id="Option" type="checkbox"> 
 
    <label class="checkbox" for="Option" style="margin-left: 102px;">Wedding Photography</label> 
 
    <input id="option2" type="checkbox"> 
 
    <label class="checkbox" for="option2">Portfolio</label> 
 
    <input id="option3" type="checkbox"> 
 
    <label class="checkbox" for="option3">Product Photography</label> 
 
    <input id="option4" type="checkbox"> 
 
    <label class="checkbox" for="option4">Festive Photography</label> 
 
</form> 
 
<form> 
 
    <input id="option5" type="checkbox"> 
 
    <label class="checkbox" style="margin-left: 102px;" for="option5">Baby Photography</label> 
 
    <input id="option6" type="checkbox"> 
 
    <label class="checkbox" for="option6">Animal Photography</label> 
 
    <input id="option7" type="checkbox"> 
 
    <label class="checkbox" for="option7">Event Photography</label> 
 
    <input id="option8" type="checkbox"> 
 
    <label class="checkbox" for="option8">Mobile Photography</label> 
 
</form> 
 
<form> 
 
    <input id="option9" type="checkbox"> 
 
    <label class="checkbox" style="margin-left: 102px;" for="option9">Animals Photoshoot</label> 
 
    <input id="option10" type="checkbox"> 
 
    <label class="checkbox" for="option10">Flim Making</label> 
 
    <input id="option11" type="checkbox"> 
 
    <label class="checkbox" for="option11">Corporate Photography</label> 
 
    <input id="option12" type="checkbox"> 
 
    <label class="checkbox" for="option12">Video Services</label> 
 
</form>

Answer 1

Aşağıdaki ile değiştiriniz css sorunu çözebilir.

.checkbox { 
    font: 15px Segoe UI, sans-serif; 
    display: inline-block; 
    cursor: pointer; 
    font: 15px; 
    //margin-right: 50px; 
    line-height: 18px; 
    width : 23%; 
} 

Answer 2

marjı çıkarın ve genişlik % 20 ekleyin.

.checkbox { 
    font: 15px Segoe UI, sans-serif; 
    display: inline-block; 
    width: 20%; 
    cursor: pointer; 
    font-size: 15px; 
    line-height: 18px; 
    float: left; 
}