Build a survey form project - losing heading directly after dropdown

Build a survey form project - losing heading directly after dropdown
0
#1

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.

<head></head>
<body>
  <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="[email protected]" required>
    <label for="email">Email</label><br>
    <input type="number" name="age" id="number" 
           placeholder="0-199" min="0" max="199" 
           required>
    <label for="number">Age</label><br>
    <div id="dropdown">
      <h3 id="dropdown-content">Favorite genre</h3>
        <select>
        <option>Action</option>
        <option>Adventure</option>
        <option>Comedy</option>
        <option>Drama</option>
        <option>Fantasy</option>
        <option>Horror</option>
        <option>Magic</option>
        <option>Mystery</option>
        <option>Psychological</option>
        <option>Romance</option>
        <option>Sci-fi</option>
        <option>Slice of life</option>
        <option>Supernatural</option>div
    </div>
    <div>
      <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>
    </div>
    <div>
      <h3 id="choosing">
        What are you looking for when 
        choosing what anime to watch? 
      </h3>
      <h4>
        (Select as many as apply)
      </h4>
      <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>
    </div>
    <div>
      <p>What is your favorite anime ever and why?
      </p>
      <textarea rows="4"cols="50">
      </textarea>
      <button type="submit">Submit</button>
      </form>
</body>

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;
}
#2
<option>Supernatural</option>div

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.

#3

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?

#4

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

#5

Vendronica/pen/RmVQWo

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

#6

Maybe if you closed <select>

#7

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

#8

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