Why do my checkboxes and radio buttons have weird spacing?

Question

I'm just getting started with HTML and CSS (via freeCodeCamp) and struggle with my first certification project: building a survey form. Everything went well up to the point where I needed to add checkboxes and radio buttons. There's a huge amount of space between the clickable box/button and the corresponding label, and I can't get all of this content to be centered to the left.

I tried experimenting with different margin and padding values, as well as text-align and display options. It had hoped I would end up with something like this:

My pronouns are: [] she/her 
                 [] he/him
                 [] they/them

Choose one: () Yes
            () No
            () Maybe

However, it just looks really messy and nothing I've tried changed anything in how this displays. This is what it looks like right now:

My pronouns are:          []          she/her 
                 []          he/him
                 []          they/them

Choose one:           ()          Yes
            ()          No
            ()          Maybe

My Code:

body {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 100vh;
margin: 0;
font-family: Futura;
}

fieldset {
margin-top: 20px;
background-color: pink;
width: 70%;
border: 3px solid #ffffff;
border-radius: 5px;
}

legend {
background-color: grey;
color: #ffffff;
border: solid;
border-radius: 10px;
padding: 2px 5px;
}

input {
width: 50%;
background-color: #ffffff;
color: grey;
margin: 5px;
font-family: Futura;
} 

input[type=submit], input[type=reset] {
background-color: skyblue;
color: #000000;
width: 25%;
margin-top: 15px;
}

.textarea {
  font-family: Futura;
  color: grey;
  font-size: 14px;
}

<fieldset>
  <legend>Checkbox area</legend>
  <div>
    My pronouns are:
    <input type="checkbox" id="option1" name="option1" value="she/her"><label for="option1">she/her</label>
    <input type="checkbox" id="option2" name="option2" value="he/him"><label for="option2">he/him</label>
    <input type="checkbox" id="option3" name="option3" value="they/them"><label for="option3">they/them</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="yes-no-maybe" value="yes" checked> Yes</label>
    <label><input type="radio" name="yes-no-maybe" value="no"> No</label>
    <label><input type="radio" name="yes-no-maybe" value="maybe"> Maybe</label>
  </div>
</fieldset>

Answer 1

Just add the parent class which is flex and wrap the label and input in a common div.

body {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 100vh;
margin: 0;
font-family: Futura;
}

fieldset {
margin-top: 20px;
background-color: pink;
width: 70%;
border: 3px solid #ffffff;
border-radius: 5px;
}

legend {
background-color: grey;
color: #ffffff;
border: solid;
border-radius: 10px;
padding: 2px 5px;
}

input {
width: auto;
background-color: #ffffff;
color: grey;
margin: 5px;
font-family: Futura;
} 

input[type=submit], input[type=reset] {
background-color: skyblue;
color: #000000;
width: 25%;
margin-top: 15px;
}

.textarea {
  font-family: Futura;
  color: grey;
  font-size: 14px;
}
.flex {
    display: flex;
    margin-bottom: 20px;
}

<fieldset>
  <legend>Checkbox area</legend>
  <div class="flex">
    My pronouns are:
    <div class="clust">
      <div class="ch-wrap">
          <input type="checkbox" id="option1" name="option1" value="she/her"><label for="option1">she/her</label>
      </div>
      <div class="ch-wrap">
          <input type="checkbox" id="option2" name="option2" value="he/him"><label for="option2">he/him</label>
      </div>
      <div class="ch-wrap">
          <input type="checkbox" id="option3" name="option3" value="they/them"><label for="option3">they/them</label>
      </div>
      </div>
  </div>
  <div class="flex">
    Choose One
      <div class="radio">
        <div class="ch-wrap">
          <label><input type="radio" name="yes-no-maybe" value="yes" checked> Yes</label>
        </div>
        <div class="ch-wrap">
          <label><input type="radio" name="yes-no-maybe" value="no"> No</label>
        </div>
        <div class="ch-wrap">
          <label><input type="radio" name="yes-no-maybe" value="maybe"> Maybe</label>
        </div>
      </div>
   </div>
</fieldset>