html - Radio button pseudo-element positioning problems in a container with a percentage width -

i have following radio buttons set percentage-width container:

the circle in middle has centred, of course.

i have found quite tricky pseudo-element positioning.

depending on browser's width, circle not horizontally centred. here gif of radio buttons, while resizing window:

is possible keep circle centred while maintaining percentage-width container?

here's code:

html:

<div class="form-section gender">   <div class="label-col">     <label>gender</label>   </div>   <div class="form-section">     <input type="radio" name="gender" id="male" value="male" />     <label for="male"><span>male</span></label>   </div>   <div class="form-section">     <input type="radio" name="gender" id="female" value="female" />     <label for="female"><span>female</span></label>   </div> </div> 

css (compiled scss):

@charset "utf-8"; .gender {   width: 80%;   margin: 0 auto; } .gender .form-section {   margin-top: 20px;   display: inline-block;   width: 70px; } .gender input[type=radio] {   display: none;   width: 30px; } .gender .form-section label {   display: inline-block;   cursor: pointer;   position: relative;   padding-left: 25px;   margin-right: 15px;   color: gray; } @keyframes fade-in {   {     opacity: 0.7;   }   {     opacity: 1;   } } .gender .form-section label:before {   content: "";   display: inline-block;   width: 16px;   height: 16px;   margin-right: 10px;   position: absolute;   left: 0;   bottom: 1px;   background-color: transparent;   border: 2px solid gray;   border-radius: 50%; } .gender input[type=radio]:checked + label:before {   font-family: monaco, menlo, consolas, "courier new", monospace;   content: "•";   color: blue;   font-size: 21px;   text-align: center;   line-height: 17px;   border: 2px solid blue;   animation: fade-in 1s; } .gender input[type=radio]:checked + label {   color: blue; } 

codepen link: http://codepen.io/anon/pen/jxxvzw

i have used translate position inner dot center label , changed label styling add outer border

.gender {    width: 80%;    margin: 0 auto;  }  .gender .form-section {    margin-top: 20px;    display: inline-block;    width: 70px;  }  .gender input[type=radio] {    display: none;    width: 30px;  }  .gender .form-section label {    display: inline-block;    cursor: pointer;    position: relative;    width: 16px;    color: gray;    border: 2px solid grey;    border-radius: 50%;    height: 16px;  }  .gender .form-section label span {    margin-left: 25px;  }  @keyframes fade-in {    {      opacity: 0.7    }    {      opacity: 1    }  }  .gender .form-section label:before {    content: "";  }  .gender input[type=radio]:checked + label:before {    width: 8px;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    height: 8px;    background: blue;    position: absolute;    border-radius: 50%;    animation: fade-in 1s;  }  .gender input[type=radio]:checked + label {    border-color: blue;  }

<div class="form-section gender">    <div class="label-col">      <label>gender</label>    </div>    <div class="form-section">      <input type="radio" name="gender" id="male" value="male" />      <label for="male"><span>male</span>      </label>    </div>    <div class="form-section">      <input type="radio" name="gender" id="female" value="female" />      <label for="female"><span>female</span>      </label>    </div>  </div>