チェックボックスが正しく配置されていません。それを修正するには？

Question

添付画像に示されているように、チェックボックスが正しく配置されていないことがあります。私は修正するために様々な方法を試しましたが、何も動作していないようです。私の間違いを指摘できますか？私はあなたが現在の単語の大きさに依存していることを見ることができるので、言葉がどれほど大きくても、適切なアラインメントでそれらを欲しいです。

コード：

.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

次のように置き換えてください。問題が解決する場合があります。

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

Answer 2

マージンを外し、幅20％を追加します。

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