Survey form - radio buttons

I have a feeling it was like below my latest round, I’m not sure though.

Why does the behaviour of the first radio buttons differs from the rest, it seems it’s affected by something, the label appears on the bottom of the input and not on the right side like the other two.

<head>
  <title>Page with a form</title>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet"></link>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
</head>
<body>
  <div>
    <h1 id='title'>Andromedas survey form
    </h1>
      <p id="description">
        We would appreciate if you fill in the form
      </p>
  </div>
  <form id="survey-form">
    <div class='container'>
    <label id='name' for='name'>Name</label>
      <input id='name-label' type='text' name='namn' required='required' placeholder='Enter your name'/>
    <label id='email' for='email'>Email</label>
    <input id='email-label' type='text' name='email' required='required' placeholder='Enter your email'/>
    <label id='number' for='age'>Age (optional)</label>
    <input id='number-label' type='number' name='age' min='10' max='99' placeholder='99'>
    <label id='dropdown' for='role'>Which option best describes your current role?</label>
    <select id='dropd' name='role' placeholder='Select current role'>
      <option value='select current role'>Select current role</option>
      <option value='student'>Student</option>
      <option value='full time job'>Full time job</option>
      <option value="full time learner">Full time learner</option>
      <option value="prefer not to say">Prefer not to say</option>
      <option value="other">Other</option>
  </div>
<!-- Radio buttons -->
  <div>
    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor">Indoor</label>
    
    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor">Indoor</label>
    
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor">Indoor</label>
  </div>
         
  </form>
    
  </body>  
 </html>

html {
  background: url('https://images.pexels.com/photos/7598019/pexels-photo-7598019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  opacity: 0.7;
}

body {
  text-align: center;
}

#title {
  text-align: center;
  font-family: 'Open+Sans';
  font-size: 40px;
  margin-bottom: 0;
  padding: 0;
}

#description {
  text-align: center;
  margin: 5px 0 40px;
  font-size: 18px;
}

#survey-form {
  display: inline-block;
  padding: 30px 30px;
  background-color: hsl(10, 90%, 90%);
}

.container {
  display: flex;
  flex-direction: column;
}

#name-label, 
#email-label,
#number-label {
  padding-bottom: 15px;
  font-size: 20px;
  font-family: arial;
  color:
}

#name,
#email,
#number {
  font-size: 20px;
  font-family: arial;
  margin: 20px 0 7px 0;
}

#dropdown {
  width: 100%;
  font-size: 20px;
  font-family: arial;
  margin: 20px 0 7px 0;
}

#dropd { 
  width: 100%;
  height: 40px;
  margin-bottom: 30px; 
}

Hi, good job with the project and congratulations you are really close to finishing it.

I see that the main problem is that you are missing a closing tag for select element. Also do not forget that your radio inputs shoul have unique value each.

You can use this site to validate your HTML code: The W3C Markup Validation Service. It might be helpful because it can point out some issues, so I definitely recommend using it.