Vfrdtyky

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.

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.