问CSS网格中的列表不按预期对齐

EN

<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>

.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;
}