I am struggling to center a group of three radio buttons horizontally and have not been successful.
Below is the code I am using:
HTML
<div class="section-wrap section-flavors">
<input id="r11" name="radio3" type="radio" value="radio_btn" class="flavors-radio">
<label for="r11"><span></span>Don't Want</label>
<input id="r12" name="radio3" type="radio" value="radio_btn" class="flavors-radio">
<label for="r12"><span></span>Don't Care</label>
<input id="r13" name="radio3" type="radio" value="radio_btn" checked class="flavors-radio">
<label for="r13"><span></span>Want</label>
</div>
Below is the CSS code I have for it:
CSS
.content .section-wrap {
background: #f1f8e9;
padding: 30px;
overflow: hidden;
}
I have attempted to use text-align: center and display: inline-block but have not had success.
I have also referenced this question and this one but have not been able to implement their solutions in my case. Thank you.