Survey Form - Build a Survey Form

Tell us what’s happening:

Hello there
I`ve tried many things , it did not work
it says:
Your #description should not be empty.
pls help

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
 <head class="survey-form"></head>
 <link rel="stylesheet" href="styles.css">
  <h1 id="title">SURVEY FORM</h1>
  <p id="description"></p>
  <form id="survey-form">
   <label id="name-label">Name<br><input id="name" type="text" placeholder="john" required></input></label><br>
    <label id="email-label">E-mail<br><input id="email" type="email" placeholder="" required></input></label><br>
    <label id="number-label">Age<br><input id="number" type="number" 
  min="15" max="65"value="number"
  <label>Which Type of personality<br>
    <select id="dropdown">
  <label>Type of Sciences You like
    <br><input type="radio" name="science" value="biology">Biology</input><br>
    <input type="radio" name="science"value="computer-science">computerscience</input><br>
    <input type="radio" value="physics"name="science">Physics</input><br>
<h3>Hobbies you like</h3>
    <input type="checkbox" value="music">Music</input><br>
    <input type="checkbox" value="reading">Reading</input><br>
<textarea placeholder="tell us more about yourself"></textarea>
  <button value="submit" id="submit">Submit</button>
/* file: styles.css */
body {
  display: inline-block;
  text-align: center;
background-color: #1f5f5f;
margin-top: 2em;
color: orange;
width: 90%;
padding: 0rem auto;
font-size: 1.12rem;
line-height: 1.6;

{min: 13;
max: 65;
input {
  width: auto;
  padding: auto;
textarea, placeholder {
  width: 70%;
  height: 100px;
h1, h3 {
  font-size: 30;
  color: black;

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

this is the element whose id is description
It is currently empty.