how to align button radio in css - html

Question

I am trying to align the button radios on my page and it seems that one of the buttons (Gender) is highly indented. The radio for the M (Gender) is at the center and the other button is at the far right. I've been changing the values in css but it doesn't align. How do I align them? Anyone help? My css is combined and I got most of help here from SO.
form {
width: 80%;
margin: 0 auto;
}
label,
input {
display: inline-block;
}
label {
width: 30%;
}
label + input {
width: 30%;
margin: 0 10% 0 1%;
}
.label-align input[type="checkbox"] {
cursor: pointer;
margin-top: 6px;
}
.label-align span {
margin: 0 0 10px 10px;
display: block;
}
.left {
float: left;
}
<div id="register" class="container">
<form action="" method="post">
<label>*First Name:</label>
<input type="text">
<br>
<label>*Last Name:</label>
<input type="text">
<br>
<label>*Birth Date:</label>
<input type="text">
<br>
<label>*Gender:</label>
<input type="radio" name="gender" value="male" checked>M
<input type="radio" name="gender" value="female" checked>F
<br>
<label>*Email:</label>
<input type="text">
<br>
<label>*Password:</label>
<input type="text">
<br>
<label>*Re-enter Password:</label>
<input type="text">
<br>
<button class="button" type="submit" value="Submit" onclick="" style="vertical-align:middle"><span>Submit</span>
</button>
</form>
</div>

Answer 1

This is happening because of this the following style.
label + input {
width: 30%;
margin: 0 10% 0 1%;
}
All inputs following a label will gain a width of 30%.
The reason only the first radio-button is affected by this is because it's the one that's adjacent to the gender label.
You could change this rule so it only affects input boxes for example.
label + input[type='text'] {
width: 30%;
margin: 0 10% 0 1%;
}
Snippet example
form {
width: 80%;
margin: 0 auto;
}
label,
input {
display: inline-block;
}
label {
width: 30%;
}
label + input[type='text'] {
width: 30%;
margin: 0 10% 0 1%;
}
.label-align input[type="checkbox"] {
cursor: pointer;
margin-top: 6px;
}
.label-align span {
margin: 0 0 10px 10px;
display: block;
}
.left {
float: left;
}
<div id="register" class="container">
<form action="" method="post">
<label>*First Name:</label>
<input type="text">
<br>
<label>*Last Name:</label>
<input type="text">
<br>
<label>*Birth Date:</label>
<input type="text">
<br>
<label>*Gender:</label>
<input type="radio" name="gender" value="male" checked>M
<input type="radio" name="gender" value="female" checked>F
<br>
<label>*Email:</label>
<input type="text">
<br>
<label>*Password:</label>
<input type="text">
<br>
<label>*Re-enter Password:</label>
<input type="text">
<br>
<button class="button" type="submit" value="Submit" onclick="" style="vertical-align:middle"><span>Submit</span>
</button>
</form>
</div>

Answer 2

label + input {
width: 30%;
margin: 0 10% 0 1%;
}
Remove width :30%;

Answer 3

Please add following css,
input[type="radio"] {
margin: 4px 4px 4px 4px;
width: 2%;
}

Answer 4

In your code add one class like this
<input type="radio" name="gender" class="gender" value="male" checked>M
<input type="radio" name="gender" value="female" checked>F<br>
in your css style property add this class gender property like this.
.gender{
width: 0px !important;
margin: 0px 0px 0px 4px !important;
}