Label of Checkbox is wrong

my problem is that i have a 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;
        }