Checkbox alignment in select optgroup

Question

How do I align as in the image below the checkbox and label?

Here is not bobbing right, for better viewing can access:

http://jsfiddle.net/8f7aLch6/

Code:

$(function() {

  $('#chkveg').multiselect({

  	includeSelectAllOption: true;

  });

});

.multiselect-container>li>a>label {
  padding: 4px 50px 3px 20px;
}

<script src="https://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
<script src="https://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css">


<form id="form1">

  <div style="padding:20px">

    <select id="chkveg" multiple="multiple">
      <optgroup label="Frist Queue" id="Frist Queue">
        <option value="cheese">Cheese</option>
        <option value="tomatoes">Tomatoes</option>
        <option value="mozarella">Mozzarella</option>
      </optgroup>

      <optgroup label="Second Queue" id="Second Queue">
        <option value="mushrooms">Mushrooms</option>
        <option value="pepperoni">Pepperoni</option>
        <option value="onions">Onions</option>
      </optgroup>
    </select>

  </div>

</form>

Answer 1

You have to style by overriding the CSS of the Multiselect component you used

Using this CSS, note that I used a a:not(.multiselect-all) not to catch the padding in the checkbox "select all"

.multiselect-container>li>a:not(.multiselect-all)>label.checkbox {
  padding-left: 40px !important;
}

And to adjust the optiongroup label you use this CSS

.multiselect-item.multiselect-group a label b {
  margin-left: -20px
}

You get that result: See the link http://jsfiddle.net/uo8v45qj/

Answer 2

removes the label

.multiselect-container>li>a{
    padding: 4px 50px 3px 20px;
}