Build a survey form project - losing heading directly after dropdown

Doing the build a survey form and I am losing the heading that’s supposed to come immediately after the dropdown menu. I can’t figure out why and would appreciate any help. I can’t post links yet, so.

  <h1 id="title">Anime Interests Survey</h1>
  <p id="description"></p>
  <form id="survey-form">
    <input type="text" id="name" 
           placeholder="What are you called?"required>
    <label for="name">Name</label><br>
    <input type="email" name="email" id="email" 
           placeholder="" required>
    <label for="email">Email</label><br>
    <input type="number" name="age" id="number" 
           placeholder="0-199" min="0" max="199" 
    <label for="number">Age</label><br>
    <div id="dropdown">
      <h3 id="dropdown-content">Favorite genre</h3>
        <option>Slice of life</option>
      <h3 id="week">How many hours of anime do you watch per week?</h3>
      <input type="radio" name="hours" value="0" checked>0<br>
      <input type="radio" name="hours" value="1-5">1-5<br>
      <input type="radio" name="hours" value="5-10">5-10<br>
      <input type="radio" name="hours" value="10-20">10-20<br>
      <input type="radio" name="hours" value="More than 20">More than 20<br>
      <h3 id="choosing">
        What are you looking for when 
        choosing what anime to watch? 
        (Select as many as apply)
      <input type="checkbox" name="interest1" value="character">Character driven<br>
      <input type="checkbox" name="interest2" value="romance">Romance<br>
      <input type="checkbox" name="interest3" value="comedy">Comedy<br>
      <input type="checkbox" name="interest4" value="fan service">Fan service<br>
      <input type="checkbox" name="interest5" value="Mecha">Mecha<br>
      <input type="checkbox" name="interest6" value="fantasy world">Fantasy world<br>
      <p>What is your favorite anime ever and why?
      <textarea rows="4"cols="50">
      <button type="submit">Submit</button>

body {
  font-family: monospace;
  font-size: large;
  background-color: #ffff99;
h1 { 
  background-color: #ccffff;
  text-align: center;
  margin: 0px;
  padding: 20px;
h3 {
  background-color: #ccffff;
  text-align: center;
#choosing {
  margin-top: 48px;

You have the word div floating in there.

Do you have the CSS in a seperate file?
You will need to add the meta tags to the head section for viewport.

Thanks, but that didn’t fix it. I’m using codepen so its showing how things look. That bit just isn’t right. Unless I misunderstanding something?

Post our codepen link without the protocol…something like; where xxYYaZ is the link to your pen


Really had to shorten it down before it would let me post it.

Maybe if you closed <select>

Thank you so much! I can’t believe I missed that when I read how to do it.

I wasn’t able to view your survey form. Maybe re-post the link.