Label of Checkbox is wrong - html

Question

my problem is that i have a <asp:CheckBoxList> and i have 2 list items with text but my text is inside my checkbox and i searched everywhere and didn't found an answer to that. All i want to do is have the text aligned to the right of the textbox and not inside it.
Here is some code to check it out:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="squaredTwo">
<asp:CheckBoxList
ID="squaredTwo"
CellPadding="5"
CellSpacing="5"
runat="server">
<asp:ListItem Text="Hello i'm fred" />
<asp:ListItem Text="Hello i'm mike" />
</asp:CheckBoxList>
</div>
</div>
</div>
CSS
.squaredTwo #squaredTwo {
margin-top: 5px;
}
.squaredTwo {
width: 24px;
height: 24px;
background: #f5f5f5;
background: -webkit-linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
background: -moz-linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
background: -o-linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
background: -ms-linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
background: linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
position: relative;
}
.squaredTwo input[type=checkbox] {
margin-left: 5px;
}
.squaredTwo label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
left: 2px;
top: 2px;
background: -webkit-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
background: -moz-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
background: linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#f5f5f5',GradientType=0 );
}
.squaredTwo label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 12px;
height: 7px;
background: transparent;
top: 5px;
left: 4px;
border: 3px solid #0099b5;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredTwo label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.squaredTwo input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

Answer 1

I resolved the problem. I just used another CSS but the same HTML. Here you go if you have some problem with this:
input[type=checkbox] {
position: absolute;
z-index: -1000;
left: -1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
input[type=checkbox] + label {
padding-left: 29px;
height: 23px;
display: inline-block;
line-height: 23px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 14px;
margin-bottom: 20px;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
color: #000;
font-family: sans-serif;
}
input[type=checkbox]:checked + label {
background-position: 0 -23px;
}
label {
background-image: url(nameofyourimage);
background-size: 23px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
PS: You need an image like this: http://i.imgur.com/zg4tHVq.png