Help: text/header cut off and submit button not recognized?

Tell us what’s happening:

  1. From [div class=“checkbox”] down to the break before [label>Option 2</label] – this entire header and first option don’t appear properly (missing) on the browser page/in the preview; can’t figure out why.

  2. Code is somehow not meeting requirements for the following:

Any assistance would be much appreciated.

Your code so far

/* file: index.html */
<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
      href="https://fonts.googleapis.com/css2?family=Quicksand&family=Roboto+Flex:opsz,wght@8..144,500&family=Space+Mono&display=swap"
      rel="stylesheet">
</head>

<html>

<body>
  <div class="survey">
      <form id="survey-form">
      <h1 id="title">SURVEY</h1>
      <h4>This is a subtitle</h4>
      <p id="description">This is a description</p>
          <label id="name-label">Name:</lable>
              <input type="text" id="name" required placeholder="Jane Doe">
              <div class="p-info">
                  <label id="email-label">Email:</label>
                  <input type="email" id="email" required placeholder="jdoe@gmail.com">
                  <br>
                  <label id="number-label">Number:</label>
                  <input type="number" id="number" required min="1" max="50" placeholder="7">
              </div>
              <div class="radio">
                  <h4>These are the radio buttons</h4>
                  <label id="radio"> Option 1</label>
                  <input type="radio" name="radio-option" value="1">
                  <label id="radio"> Option 2</label>
                  <input type="radio" name="radio-option" value="2">
              </div>
              <br>
              <div class="dropdown">
                  <h4>This is a dropdown</h4>
                  <label>This is a dropdown</label>
                  <select id="dropdown">
                      <option value="">(select one)</option>
                      <option value="1">Option 1</option>
                      <option>Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Other</option>
              </div>
              <br>
              <div class="checkbox">
                <h4>This is a checkbox</h4>
                  <label>Option 1</label>
                  <input type="checkbox" name="check" value="1">
                  <br>
                   <label>Option 2</label>
                  <input type="checkbox" name="check" value="2">
              </div>
              <div id="textbox">
                  <h4>This is a textbox<h4>
                      <br>
                  <label>Text box:</label>
                  <br>
        <textarea name="bio" rows="3" cols="30" placeholder="Goes here"></textarea>
      
              </div>
              <div id="submit">
                   <input type="submit" value="Submit" id="submit" />
                  </div>
      </form>
  </div>
</body>

</html>
/* file: styles.css */
label {
font-weight: normal;
}
  **Your browser information:**

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

An id should only be used on one element. You have two instances of the same id.