My goal is to align all my buttons vertically, similar to the first question. However, I'm struggling to get the second question to align correctly. Despite trying different methods like using the vertical-align: middle property, nothing seems to be working.
body {
margin: 0px;
background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
}
#wrapper {
padding-top: 0px;
text-align: center;
margin-top: -1%;
margin-left: 20%;
margin-right: 20%;
background-color: white;
clear: both;
}
#quiz {
padding-bottom: 10px;
}
#quiz li {
list-style-type: none;
}
.question {
padding-bottom: 10px;
vertical-align: middle;
}<div id="wrapper">
<div id="quiz">
<form name="quiz" method="post" name="buttons" id="quiz" onsubmit="return false">
<li>
<div class="question">1. How many continents are there?</div>
</li>
<input id="answer" type="radio" name="group1" value="wrong"> 6<br>
<input id="answer" type="radio" name="group1" value="wrong"> 8<br>
<input id="answer" type="radio" name="group1" value="correct"> 7<br>
<input id="answer" type="radio" name="group1" value="wrong"> 5
<hr>
<li>
<div class="question">2. Where is France located?</div>
</li>
<input id="answer" type="radio" name="group2" value="correct"> Europe<br>
<input id="answer" type="radio" name="group2" value="wrong"> Asia<br>
<input id="answer" type="radio" name="group2" value="wrong"> Antarctica<br>
<input id="answer" type="radio" name="group2" value="wrong"> North America
<hr>
</form>
</div>
</div>