Help aligning checkbox input and labels

HTML-CSS
1

I am at the point where I have finished my HTML/CSS certificate and I am now trying to upgrade my previous certificate projects in order for me to improve my CSS coding.
I have noticed that I have a huge problem when it comes to aligning inputs with the type checkbox and labels. This is the 3rd time I am trying to do it and i just can’t.

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quick Snap Surf Shop Survey</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">Quick Snap Surf Shop Survey</h1>
    <p id="description">We kindly <em><u>Thank You</u></em> for taking the time to participate in our survey.</p>
    <form id="survey-form">
      <fieldset>
        <label id="name-label" for="name">Enter your First and Last name:<input required id="name" type="text" name="name" placeholder="e.g. Ben Dover" /></label>
        <label id="number-label" for="age">Enter your Age:<input required id="number" type="number" name="age" min="6" max="120" placeholder="Age"</label>
        <label id="email-label" for="email">Enter your Email:<input required id="email" type="email" name="email" placeholder="@.com" /></label>
      </fieldset>
      <fieldset>
        <legend>What type of surfer are you? (required)</legend>
        <label for="regular">Regular Footer<input checked id="regular" type="radio" name="footer" value="regular" class="inline" /></label>
        <label for="goofy">Goofy Footer<input id="goofy" type="radio" name="footer" value="goofy" class="inline" /></label>
      </fieldset>
      <fieldset>
        <legend>What type of boards do you enjoy using the most? (Check all that apply)</legend>
        <input id="shortboard" value="shortboard" type="checkbox" name="board" /><label id="board" for="shortboard" class="inline">Shortboard</label>
        <input id="longboard" value="longboard" type="checkbox" name="board" /><label id="board" for="longboard" class="inline">Longboard</label>
        <input id="funboard" value="funboard" type="checkbox" name="board" /><label id="board" for="funboard" class="inline">Funboard</label>
        <input id="skimboard" value="skimboard" type="checkbox" name="board" /><label id="board" for="skimboard" class="inline">Skimboard</label>
      </fieldset>
      <fieldset>
        <label for="referrer">How did you hear about our shop?
          <select id="dropdown" required name="referrer" name="referrer">
            <option value="">(select one)</option>
            <option value="1">Friend</option>
            <option value="2">Social Media</option>
            <option value="3">Poster</option>
            <option value="4">Other</option>
          </select>
        </label>
      </fieldset>
      <fieldset>
        <label for="surf-trip">What does the perfect surf trip look like?
          <textarea id="surf-trip" name="surf-trip" rows="3" cols="40" placeholder="e.g. Driving to Coxos in a van with my closest friends, barrel conditions, barbecue at the beach,... "></textarea>
        </label>
      </fieldset>
      <input id="submit" type="submit" value="Submit" />
    </form>
  </body>
</html>

body {
  width:100%;
  height:100%;
  background-image: linear-gradient(120deg, rgba(25, 25, 112, 0.6), rgba(8, 24, 168, 0.5 )), url(https://i.im.ge/2025/01/20/HMVCvx.397474-wallpaper-ocean-wave-colorful-digital-art-scenery.jpeg);
  background-repeat:no-repeat;
  background-size:cover;
  margin:0;
  color:rgb(204, 85, 0);
  font-size:16px;
  font-family: Tahoma;
}

h1 {
  background-color:rgba(25, 25, 112, 0.7);
  width:25%;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

p {
  background-color:rgba(25, 25, 112, 0.7);
  width:26%;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

#survey-form {
  width:80%;
  background-color:rgba(25, 25, 112, 0.7);
  border-radius: 10px;
  padding:20px;
  margin-left:auto;
  margin-right:auto;
  max-width:800px;
}

label {
  display:block;
  margin: 1rem 0;
}

fieldset {
  border:none;
  border-bottom: 2px solid rgb(204, 85, 0);
}

legend {
  padding-top:10px;
}

input, select, textarea {
  width:100%;
}

select, textarea {
  margin-top:10px;
}

input {
  height: 1.2rem;
}

select {
  height:1.5rem;
}

input[type="submit"] {
  margin-top:10px;
  display:block;
  width:20%;
  margin-left:auto;
  margin-right:auto;
  height:2em;
  font-size:1em;
}

.inline {
  display: inline;
  width: unset;
  margin:0 0.5rem;
  vertical-align: middle;
}

If anyone could please lend me a hand in order to fix this issue and to improve my project overall I would appreciate it!

2

Hi @fadigascodex

Try removing or commenting out all the associated margin properties.

Happy coding

3

You have given all input elements width: 100%

input,
select,
textarea {
  width: 100%;
}

Target the specific elements you want to be full width, or use the :not() selector to exclude the elements that shouldn’t be full width. You can use attribute selectors to narrow down what types of input elements you are targeting.