Is there a way to adjust the spacing between the drop down boxes in the sidebar so that they align neatly with the questions in my section?
select {
font-family: 'Courier New', monospace;
color: black;
font-weight: bold;
font-size: 30px;
text-align: left;
line-height: 50px;
}
section {
width: 31%;
display: inline-block;
vertical-align: top;
height: 270px;
}
aside {
width: 31%;
display: inline-block;
padding: 1% 1% 1% 1%;
vertical-align: top;
height: 270px;
}
button {
font-family: 'Courier New', monospace;
color: black;
font-weight: bold;
font-size: 50px;
text-align: center;
}<header>
<h1>Children's Quiz</h1>
<img src="childrenfun.webp" alt="child" height=300 width=600>
</header>
<section>
<p>What colour is made from yellow and red?</p>
<p>How many fingers do humans have?</p>
<p>What is 20 + 4?</p>
</section>
<aside>
<select id="q1">
<option>White
<option>Yellow
<option value="correct">Orange
<option>Green
</select>
<br>
<select id="q2">
<option value="correct">10
<option>20
<option>5
<option>8
</select>
<br>
<select id="q3">
<option>21
<option>6
<option>204
<option value="correct">24
</select>
</aside>
<article>
<button id="checkButton">Check Answers</button>
</article>This showcases what my website looks like at the moment: