Hello, I’m having a little problem with the radio buttons in the Survey Form project. The buttons are working, but their position is weird. I’ve been searching on google to see if I can find how I can fix it, but I can’t really describe it well enough to get the search results I want, so I decided to make this post. Here is a picture of what is happening:
See how the labels are not lining up with the buttons? The same thing is happening with the checkbox radio buttons.
When I click on Run Tests, it says I got all 17 requirements done, but I didn’t want to turn it in looking like that. I wanted them to be on the same horizontal line and aligned to the left. Like the ones from the FCC example. (https://codepen.io/freeCodeCamp/full/VPaoNP)
Here is the html code I wrote for the radio buttons:
<div class="radio-input">
<p><b>Who is your favorite character from the first anime?</b></p>
<input type="radio" id="ash" name="character" value="ash">
<label for="ash">Ash</label><br>
<input type="radio" id="brock" name="character" value="brock">
<label for="brock">Brock</label><br>
<input type="radio" id="misty" name="character" value="misty">
<label for="misty">Misty</label>
</div>
And here is the CSS:
.radio-input {
padding: 10px;
padding-bottom: 35px;
}
And here is the full project, if you need it: https://codepen.io/jmarcelo_/pen/qBrYogG
Thanks!