Tanya

Помогло это решение:
Через label или input(без приставок), либо span и псевдо-классы after, before не помогло
Если у вас такая же проблема как была у меня, то есть у вас в теме/шаблоне стили для чек-боксов не прописаны и вы пользуетесь CF7 то вам это точно поможет. Просто подставите свои значения. input[type=checkbox] - стандартный класс для всех чекбоксов стандартных :)

input[type=checkbox] {
    padding-left:5px;
    padding-right:5px;

    -webkit-appearance:button;

    border: double 2px rgb(151, 55, 199);

    background-color:transparent;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=checkbox]:checked {
    background-color: rgb(151, 55, 199);
    border-radius: 45px;
}

input[type=checkbox]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

Знаю, что решение довольно простое, сама уже догадалась, если вдруг кто-то задасться таким вопросом, то помогло мне следующее:

Я просто прописала контейнеру в котором находились три этих блока нужную мне ширину и margin:auto;

То есть иерархия вышла такая > главный контейнер с бэкграундом > потом контейнер в котором > три блока
там где три блока я прописала первому
margin-rigth: 10px
так же и второму, третий не трогала
ширину не задавала каждому блоку отдельно, просто прописала главному контейнеру след.

width: 82%;
    margin: auto;

и стало как надо, хотя может так и не совсем кореектно