Survey Form not displaying properly in freeCodeCamp Preview Interface but works fine in other browsers

Hello, I was writing the code for this survey form in VS Code and the result is ok but when I paste it into freeCodeCamp, everything is messed up. Works fine in other browsers too.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <title>HTML Survey Form</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="">
<link rel="preconnect" href="" crossorigin>
<link href=",wght@0,300;0,400;1,200&display=swap" rel="stylesheet">
    <div class="container">
        <h1 id="title">freeCodeCamp Survey Form</h1>
        <p id="description">Thank you for taking the time to help 
          us improve the platform</p>
      <form method="post" id="survey-form">
        <div class="form-group">
          <label id="name-label">Name</label>
          <input type="text" id="name" placeholder="Enter your name" required>
        <div class="form-group">
          <label id="email-label">Email</label>
          <input type="email" id="email" placeholder="Enter your Email" required>
        <div class="form-group">
          <label id="number-label">Age <span class="small">(optional)</span> </label>
          <input type="number" id="number" placeholder="Select your age" max="120" min="13" required>
        <div class="form-group">
          <p class="ask-user">Which option best describes your current role?</p>
          <select id="dropdown">
            <option>Select current role</option>
            <option>Full Time Job</option>
            <option>Full Time Learner</option>
            <option>Prefer not to say</option>
        <div class="form-group">
          <p class="ask-user">Would you recommend freeCodeCamp to a friend?</p>
          <label class="user-response" for="Definitely"><input type="radio" id="Definitely" name="user-response" value="Definitely">Definitely</label>
          <label class="user-response" for="Maybe"><input type="radio" id="Maybe" name="user-response" value="Maybe">Maybe</label>
          <label class="user-response" for="Not_sure"><input type="radio" id="Not_sure" name="user-response" value="Not_sure">Not sure</label>
        <div class="form-group">
          <p class="ask-user">What is your favorite feature of freeCodeCamp?</p>
          <select id="dropdown">
            <option>Select an option</option>
            <option>Open Source</option>
        <div class="form-group">
          <p class="ask-user">What would you like to see improved? <span class="small">(Check all that apply)</span></p>
          <label class="user-response"><input type="checkbox" value="Front-end projects">Front-end projects</label>
          <label class="user-response"><input type="checkbox" value="Back-end projects">Back-end projects</label>
          <label class="user-response"><input type="checkbox" value="Back-end projects">Data Visualization</label>
          <label class="user-response"><input type="checkbox" value="Back-end projects">Challenges</label>
          <label class="user-response"><input type="checkbox" value="Back-end projects">Open Source Community</label>
          <label class="user-response"><input type="checkbox" value="Back-end projects">Gitter help rooms</label>
          <label class="user-response"><input type="checkbox" value="Back-end projects">Videos</label>
          <label class="user-response"><input type="checkbox" value="Back-end projects">City Meetups</label>
          <label class="user-response"><input type="checkbox" value="Back-end projects">Wiki</label>
          <label class="user-response"><input type="checkbox" value="Back-end projects">Forum</label>
          <label class="user-response"><input type="checkbox" value="Back-end projects">Additional Courses</label>
        <div class="form-group"> 
          <p class="ask-user">Any comments or suggestions?</p>
          <textarea id="suggestion" rows="7"></textarea>
        <div class="form-group">
          <button type="submit" id="submit" class="submit-btn">Submit</button>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

body {
  background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7) ), url(;
  background-attachment: fixed;
  font-family: 'Poppins', sans-serif;
  color: white;

.container {
  margin: auto;
  /* border: 5px solid red; */

  text-align: center;
  margin: 3em 0 2.2em;
  /* border: 3px solid red; */

.description {
  font-style: italic;
  font-weight: 200;
  letter-spacing: .3px;
  margin: .2em auto;
  max-width: 28.1em;

#survey-form {
  width: 80%;
  max-width: 720px;
  background-color: rgba(27, 27, 50, 0.8);
  border-radius: 4px;
  border: none;
  margin: 1em auto;
  font-family: inherit;
  font-size: 300;
  padding: 1em 0;
  /* overflow: hidden; */

.form-group {
  display: block;
  margin: 0 auto;
  /* border: 1px solid red; */
  padding: .5em 0;

label, input, select, .ask-user, textarea, .submit-btn {
  display: block;
  width: 90%;
  margin: 0 auto;
  border: none;
  outline: none;
  font-family: inherit;

label, .ask-user {
  font-size: 1rem;
  margin: 10px auto;

input, select, textarea{
  height: 2.5em;
  border: none;
  border-radius: .2em;
  padding: 0 .8em;
  font-size: medium;

.small {
  font-size: small;

  /* color: gray; */

.user-response {
  display: flex;
  align-items: center;
  margin: 0 auto;
  /* border: 1px solid white; */

input[type="radio"], input[type="checkbox"] {
  width: 1.2em;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
  border: 10px solid yellow;

#suggestion {
  height: auto;
  padding: .8em 1em;

.submit-btn {
  height: 2.8em;
  margin: 1.5em auto 2em;
  border: none;
  border-radius: .2em;
  background-color: #37af65;
  color: white;
  font-family: Poppins;
  font-size: 200;
  cursor: pointer;

#dropdown {
  font-family: inherit;
  color: gray;

Your browser information:

Browser: Google Chrome, Firefox

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Welcome to our community!

You have duplicated ids: <select id="dropdown">

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.