checkbox label overlapping the checkbox

I'm doing PHP project using YII framework. I have apply css style for checkbox but the issue is that text for the label is overlapping the checkbox. so if someone can help I will really appreciate it.

Here is my css

input[type=checkbox]{
    position: static;
    margin-right: 10px;
    margin-left: 0;
    display: none;
    border: none !important;
    box-shadow: none !important;
}

input[type=checkbox] + label{
    display: block;
    color: #595a5b;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background:#595a5b;
}

input[type=checkbox]:checked + label{
    background: #3e97eb;
    content: '\f14a';
    color: #595a5b;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

And Here is the code for render the checkbox

return array(   
            'action'=>url("/xsearch/location"),
            'elements' => array(
                'label'=> $this->t('<h3 style="border-bottom: solid #DDDDDD 1px;color: #0a0a0a;margin-left: 0px;">Location</h3>'),
                'location'=>array(
                    "type"=>"checkboxlist",
                    "items"=>$locations,
                    'layout' => "{label}\n<fieldset>{input}</fieldset>\n{hint}",
                ),
            ),
            'id' => 'go-to-top-location',
            'model' => $this->model,
        );

Here is my current view