List in CSS Grid Not Aligning as Expected [duplicate] - html

Question

This question already has answers here:
How do I remove the first empty column in a CSS grid?
(3 answers)
Closed 4 years ago.
Problem / Misunderstanding:
I've created an input type="radio" for radio choices. The radio choices should align to the left at the beginning of column 3, but instead they are in the middle, between column 3 and 4.
Expected behavior:
Radio input options should be at the beginning of column 3, under aligning with the text input bar of the Name label.
Minimal, complete and verifiable code below.
MCV.html code:
<link rel="stylesheet" href="MCP.css">
<div class="grid-container">
<form id="survey-form">
<label for="name" id="name-label">Name:</label>
<input type="text" id="name">
<div class="radio-title">
<p>Gender:</p>
</div>
<div class="radio-options">
<ul>
<li>
<input type="radio" id="choice-1">
<label for="choice-1">Option A</label>
</li>
<li>
<input type="radio" id="choice-1">
<label for="choice-1">Option B</label>
</li>
</ul>
</div>
</form>
</div>
MCV.css code:
.grid-container {
display: grid;
grid-template-areas:
". . . ."
". c c ."
". . . .";
grid-template-columns: 0.7fr 1.5fr 1.5fr 0.7fr;
grid-template-rows: 0.7fr 1.5fr 0.7fr;
}
#survey-form {
display: grid;
grid-area: c;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
label {
grid-column: 2 / 3;
text-align: right;
}
input {
text-align: left;
}
ul {
list-style: none;
}
.radio-title {
grid-column: 2;
text-align: right;
}
.radio-options {
grid-column: 3 / 4;
text-align: left;
}
Here's an image with line numbers and form grid:
All feedback is appreciated, thank you!
NOTE: This issue was already answered in How do I remove the first empty column in a css grid?. Take a look at second answer.

Answer 1

I believe this is more of a List issue. Most browsers attach some sort of padding / margin to an element so most people clear these out before starting on a new page.
Going to your codepen use:
//css
.gender ul {
padding: 0;
}
and you'll see the buttons move over to your desired location.