how to align button radio in css
<p>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.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="register" class="container"&gt;
  &lt;form action="" method="post"&gt;
    &lt;label&gt;*First Name:&lt;/label&gt;
    &lt;input type="text"&gt;
    &lt;br&gt;
    &lt;label&gt;*Last Name:&lt;/label&gt;
    &lt;input type="text"&gt;
    &lt;br&gt;
    &lt;label&gt;*Birth Date:&lt;/label&gt;
    &lt;input type="text"&gt;
    &lt;br&gt;
    &lt;label&gt;*Gender:&lt;/label&gt;
    &lt;input type="radio" name="gender" value="male" checked&gt;M
    &lt;input type="radio" name="gender" value="female" checked&gt;F
    &lt;br&gt;
    &lt;label&gt;*Email:&lt;/label&gt;
    &lt;input type="text"&gt;
    &lt;br&gt;
    &lt;label&gt;*Password:&lt;/label&gt;
    &lt;input type="text"&gt;
    &lt;br&gt;
    &lt;label&gt;*Re-enter Password:&lt;/label&gt;
    &lt;input type="text"&gt;
    &lt;br&gt;
    &lt;button class="button" type="submit" value="Submit" onclick="" style="vertical-align:middle"&gt;&lt;span&gt;Submit&lt;/span&gt;
    &lt;/button&gt;
  &lt;/form&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>