Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

I’m having trouble with tests nine, ten, and 23. I put the #nav-bar at the top of the code, so how is it not at the top of the viewport? Also, I have no clue what I’m doing wrong on tests nine and 10.

Your code so far

<!-- file: index.html -->


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <header id="header">
    <nav id="nav-bar">
      <ul>
        <li class="nav-link" href="#c-flutes" id="flute-category"><a href="#c-flutes">C Flutes</a></li>
        <li class="nav-link" href="#piccolo-flutes" id="flute-category"><a href="#piccolo-flutes">Piccolos</a></li>
        <li class="nav-link" href="#alto-flutes" id="flute-category"><a href="#alto-flutes">Alto Flutes</a></li>
        <li class="nav-link" href="#bass-flutes" id="flute-category"><a href="#bass-flutes">Bass Flutes</a></li>
        <li class="nav-link" href="#contra-alto-flutes" id="flute-category"><a href="#contra-alto-flutes">Contra-Alto Flutes</a></li>
        <li class="nav-link" href="#contrabass-flutes" id="flute-category"><a href="#contrabass-flutes">Contrabass Flutes</a></li>
      </ul>
    </nav>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToH-Glsc03mQaMUtJO5_SQMaJQKu--PnPERA&s" id="header-img">
    <p id="company-name">Fantastic Flutes</p>
  </header>
  <body>
    <p id="description">We make our flutes with the highest quality metal that your could ever find. We spend five years processing and inspecting each atom of metal that is mined to make sure that each flute is of the highest quality. Currently, we have no flutes available, but they will be available in approximate 500 octillion years, so if you would like to pre-order a flute, you can do that below. The prices are also very reasonable, so even student flautists can afford our flutes of the highest quality. Below is a recording of a flute, piccolo, and alto flute of our making playing together.</p>
    <div align="center"><iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/zuy-1_3ThA0?si=GlkkKfygDa92vwbc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
    <!-- Lines 25-48 are used to describe six different types of flutes. -->
    <main>
      <section id="c-flutes">
        <div id="wrap"><img id="flute-picture" src="https://philharmonia-assets.s3.eu-west-1.amazonaws.com/uploads/2020/01/17171844/03_flute_flat.jpg">
        <p id="flute-description">C Flutes are the most common type of flute used in the standard symphony orchestra. This is the perfect flute for beginners, since making the sound is easy compared to the other categories of flutes- it doesn't require a ton of air and is relatively easy to play in tune. The standard range of a C Flute is C4-C7, but some flutes have a key that extends to B3.</p></div>
      </section>
      <section id="piccolo-flutes">
        <div id="wrap"><img id="flute-picture" src="https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcTPYVnZe18AE68u-5BqtvlEL4i1Xhm_1kwM6C_kviRPGcShTtJCTCR4-34THGfppkeycxHefAG5tl0f_ZaGzPH8zh4BqqYCq9KjPTb2_TDav5b34i9MGa8CRA">
        <p id="flute-description">Piccolos are transposing instruments, sounding one octave higher than the C flute. It is harder to play in tune on the piccolo than the flute and more focus is required to play high notes. It has the same agility as the C flute, and is sometimes called the "screeching twig" because of the shrill sound of the upper register. The standard range of a piccolo is D5-C8.</p></div>
      </section>
      <section id="alto-flutes">
        <div id="wrap"><img id="flute-picture" src="https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcSxSJdpvRh6Qq574HTrh4o5UgT_PnrKesgPNcWHCs2iLo7JkplVtbeSEiXmug-wzv3uoAYVJIb6-UQrFpFMT-mKGKSFbmI7kfqUqSX6oeC8ZIHh17KGX7ybkg">
        <p id="flute-description">Alike the piccolo flute, alto flutes are also transposing instruments, except this time, they are sounding a fourth down the written note. The sound of the alto flute is more warm, but is harder to produce a sound because more air is required. The alto flute is admired because of the beautiful sound of the low notes. Although it is called the alto flute, a more accurate name would be the "mezzo flute" because the lowest note closely matches up with that of a mezzo singer. The range of an alto flute is G3-G6.</p></div>
      <section id="bass-flutes">
        <div id="wrap"><img id="flute-picture" src="https://media.sweetwater.com/m/products/image/5061c7da5dLJLBNakdEeJzR4EbBijCYkWzOm4Loc.png?v=5061c7da5dc974e2">
        <p id="flute-description">All flutes from here are transpoing instruments, but this one in particular is pitched on octave below the C flute. Also, the tubing length of flutes from here will only get longer, this one in particular being about five feet long. The bass flute requires a lot of air to play, and circular breathing will be necessary. This is not beginner friendly. A more accurate name for this flute would be "tenor flute" because the range lines up with that of a tenor singer. The standard range of a bass flute is C3-C6.</p></div>
      </section>
      <section id="contra-alto-flutes">
        <div id="wrap"><img id="flute-picture" src="data:image/jpeg;base64,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">
        <p id="flute-description">The contra-alto flute is pitched one octave below the alto flute, so the range of the flute is more of a baritone range. To play this flute, it is close to required that you mastered circular breathing, since this flute requires SO MUCH AIR. This flute has a deep, warm, and ringing sound. The standard range for the contra-alto flute is G2-D5.</p></div>
      </section>
      <section id="contrabass-flutes">
        <div id="wrap"><img id="flute-picture" src="https://media.musicarts.com/is/image/MMGS7/J47626000000001-00-2000x2000.jpg">
        <p id="flute-description">The contrabass flute has the range of a bass singer, so it would be more logical to call this flute the "bass flute". It is pitched two octaves below the C flute. This flute requires even more air than the contra-alto, so it is more imperative that you know circular breathing. The contrabass flute has a standard range of C2-C5.</p></div>
      </section>
      <section id="pre-order">
        <p>If you would like to pre-order one of our flutes, please fill out the form below.
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <h3>Email</h3>
          <input id="email" name="email" placeholder="someone@example.com" type="email"></input>
          <h3>Type of Flute</h3>
          <input type="radio" id="flute" name="choose-flute">
          <label for="flute">C Flute</label></br>
          <input type="radio" id="piccolo" name="choose-flute">
          <label for="piccolo">Piccolo</label></br>
          <input type="radio" id="alto-flute" name="choose-flute">
          <label for="alto-flute">Alto Flute</label></br>
          <input type="radio" id="bass-flute" name="choose-flute">
          <label for="bass-flute">Bass Flute</label></br>
          <input type="radio" id="contra-alto-flute" name="choose-flute">
          <label for="contra-alto-flute">Contra-Alto Flute</label></br>
          <input type="radio" id="contrabass-flute" name="choose-flute">
          <label for="contrabass-flute">Contrabass Flute</label></br>
          <input type="submit" id="submit">
        </form>
      </section>
    </main>
  </body>
</html>

CSS:

* {
  background-color: lavender;
}

#header-img {
  width: 250px;
  height: 250px;
  display: block;
  margin: auto;
}

header {
  background: repeating-linear-gradient(
    65deg,
    red,
    red 5%,
    blue 5%,
    blue 10%
  );
}

#flute-category {
  list-style-type: none;
  padding-left: 63px;
  display: inline;
}

#nav-bar {
  background-color: rgb(224, 141, 135);
}

#nav-link {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#company-name {
  font-family: Verdana, Tahoma;
  text-align: center;
  font-size: 3em;
}

#description {
  font-family: Tahoma;
  font-size: 1.15em;
}

#wrap {
  display: flex;
}

#flute-picture {
  width: 20%;
  height: 20%;
  float: left;
}

#flute-description {
  float: left;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 2.5%;
  font-family: georgia;
}

@media (font-family: georgia) {
  #flute-description {
    font-size: 2em;
  }
}
2

For this styling you need a property position with appropriate value to put the navbar on top of the view port.
For more assistance, copy and paste your full html css code here in your topic

3

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

what position property would it be? absolute?
also, on test 10, is there a reason my code isn’t working, or is it a bug? as far as i’ve seen, all the #nav-link elements have href attributes, so I would expect it to work.

5

href is not a valid attribute for li elements

please use an html validator like Ready to check - Nu Html Checker, you have various issues that need to be addressed.

An other one is that id elememts must be unique and can’t repeat in the page.

6 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Fantastic Flute Product Landing Page</title>
  </head>
  <body>
  <header id="header">
   <nav id="nav-bar">
        <ul>
          <li class="nav-link flute-category"><a href="#c-flutes">C Flutes</a></li>
          <li class="nav-link flute-category"><a href="#piccolo-flutes">Piccolos</a></li>
          <li class="nav-link flute-category"><a href="#alto-flutes">Alto Flutes</a></li>
          <li class="nav-link flute-category"><a href="#bass-flutes">Bass Flutes</a></li>
          <li class="nav-link flute-category"><a href="#contra-alto-flutes">Contra-Alto Flutes</a></li>
          <li class="nav-link flute-category"><a href="#contrabass-flutes">Contrabass Flutes</a></li>
        </ul>
    </nav>
    <img alt="flute-drawing" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToH-Glsc03mQaMUtJO5_SQMaJQKu--PnPERA&s" id="header-img">
    <p id="company-name">Fantastic Flutes</p>
  </header>
    <p id="description">We make our flutes with the highest quality metal that your could ever find. We spend five years processing and inspecting each atom of metal that is mined to make sure that each flute is of the highest quality. Currently, we have no flutes available, but they will be available in approximate 500 octillion years, so if you would like to pre-order a flute, you can do that below. The prices are also very reasonable, so even student flautists can afford our flutes of the highest quality. Below is a recording of a flute, piccolo, and alto flute of our making playing together.</p>
    <div><iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/zuy-1_3ThA0?si=GlkkKfygDa92vwbc" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
    <!-- Lines 25-48 are used to describe six different types of flutes. -->
    <main>
      <section id="c-flutes">
        <div class="wrap"><img alt="flute" class="flute-picture" src="https://philharmonia-assets.s3.eu-west-1.amazonaws.com/uploads/2020/01/17171844/03_flute_flat.jpg">
        <p class="flute-description">C Flutes are the most common type of flute used in the standard symphony orchestra. This is the perfect flute for beginners, since making the sound is easy compared to the other categories of flutes- it doesn't require a ton of air and is relatively easy to play in tune. The standard range of a C Flute is C4-C7, but some flutes have a key that extends to B3.</p></div>
      </section>
      <section id="piccolo-flutes">
        <div class="wrap"><img class="flute-picture" alt="piccolo" src="https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcTPYVnZe18AE68u-5BqtvlEL4i1Xhm_1kwM6C_kviRPGcShTtJCTCR4-34THGfppkeycxHefAG5tl0f_ZaGzPH8zh4BqqYCq9KjPTb2_TDav5b34i9MGa8CRA">
        <p class="flute-description">Piccolos are transposing instruments, sounding one octave higher than the C flute. It is harder to play in tune on the piccolo than the flute and more focus is required to play high notes. It has the same agility as the C flute, and is sometimes called the "screeching twig" because of the shrill sound of the upper register. The standard range of a piccolo is D5-C8.</p></div>
      </section>
      <section id="alto-flutes">
        <div class="wrap"><img alt="alto-flute" class="flute-picture" src="https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcSxSJdpvRh6Qq574HTrh4o5UgT_PnrKesgPNcWHCs2iLo7JkplVtbeSEiXmug-wzv3uoAYVJIb6-UQrFpFMT-mKGKSFbmI7kfqUqSX6oeC8ZIHh17KGX7ybkg">
        <p class="flute-description">Alike the piccolo flute, alto flutes are also transposing instruments, except this time, they are sounding a fourth down the written note. The sound of the alto flute is more warm, but is harder to produce a sound because more air is required. The alto flute is admired because of the beautiful sound of the low notes. Although it is called the alto flute, a more accurate name would be the "mezzo flute" because the lowest note closely matches up with that of a mezzo singer. The range of an alto flute is G3-G6.</p></div>
      </section>
      <section id="bass-flutes">
        <div class="wrap"><img class="flute-picture" alt="bass-flute" src="https://media.sweetwater.com/m/products/image/5061c7da5dLJLBNakdEeJzR4EbBijCYkWzOm4Loc.png?v=5061c7da5dc974e2">
        <p class="flute-description">All flutes from here are transpoing instruments, but this one in particular is pitched on octave below the C flute. Also, the tubing length of flutes from here will only get longer, this one in particular being about five feet long. The bass flute requires a lot of air to play, and circular breathing will be necessary. This is not beginner friendly. A more accurate name for this flute would be "tenor flute" because the range lines up with that of a tenor singer. The standard range of a bass flute is C3-C6.</p></div>
      </section>
      <section id="contra-alto-flutes">
        <div class="wrap"><img alt="contra-alto" class="flute-picture" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8SEBAQExASEhAQEBcTEBAQEBASEhYSGBIXFhURFRcYHSggGBolIBcVIjElMTUrLi4wGCAzOTMsNygtLisBCgoKDg0OGhAQGDUlICUvLi0tKy0rLS0tLSs1LS0rLS81LS0tLS03Ky0tLS0tLS0tLSstLS0tLS8tLS0tLS0tLf/AABEIAMIBAwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwcCBP/EADgQAAICAQIEBQEFBwMFAAAAAAABAgMRBCEFBhIxEyJBUWFCIzJScYEHFENikaGxJDM0cnPB8PH/xAAYAQEBAQEBAAAAAAAAAAAAAAAAAwIBBP/EAB4RAQEBAAIDAQEBAAAAAAAAAAABAhExAxIhQVEi/9oADAMBAAIRAxEAPwDuIAAAAAAAAAAAAAAAAAAAAAAAABjIGQYZlAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeZ9jnHHeN6hah2wjNU0eX7PPWveTr+qJ0hnwa/hVVq3jiXdTjtJP3yT8mbqfG8akv1B8D5vrtgnOScXsrYbxf5+z+C0V3RcepNOOM9Wdsfmc547yxOqTtrl4Mn3vhHqqn/AN+r1/NYZBa7jWpritO5LT2SaUcyc9LdF91VZ9Mt+pRe+3yTm9T5W7ia6dlhNNZTTXummj0c15d1t0NS+i59E1FPS2OOE8qPVBPzZxjb4OkRZXG/acp7zc3h6Aya7rIpNtpJLLbeyS7tm2Ww+PV8SpraU7Ixb7Jvf+hWOa+baqaXN2OuuUX4bis32yXZUw9u+ZMrUtXqeqM5Qrq0k4xdceiyWtlJwTalnH9Xj4Ja8n8UmP66bpeIU2Y6Jxlnss7/AND6kzmcOJaNdKm7tNOU1GF1ihKvrf3VKUHmDfsy68B1lkuuqzHXU0m1jdPs9jud23ixzWeOkwDCMlGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB5nHKx3T7lZ41ynXZGarjDE156LI9VM38pp4ZaDDZnWZrt2as6cY1Oh1WisXTGdkIv8A49svtK/nT3vOf+mTa3+8W3lvm/qinLxJ15a88XG6DX0yXr+mS08YhTKKjZHqb+5FPz9Xp047fmc54/wyzrjBWRaWXdW29sfdVku3zn4PPqXF5lejNzucV0iXFKFX43iJw9Mb5f4Uu+TnXO3Of2lelj1u+ySdOmq80++07cPbCy+n1K0uLTmnp9C4xjX5b+I2Z8Gv0xSu8557d8+xM8r8C0tckrHZCNr+2tl/yNQ2+10lnwq/XoTT/Fnsa1rmf6+MzMzf8/Xzcq6SzXTjqHTKzVxk6atVfW/AjWnmd3hvK8SLykntnO2x0jQcK02k+1snm2yXmvueXKb/AFeP/iWFhKY0FEIQUYKMYpYXTusLZbnvVaaFkXCcVKL7p/8AuxSY4jF3yoXPfD43W2Vyp8SFunScYNRk8N7qWNnlkpyRnKXVOXRpoQbt6etuLay+nZ47EFxbgd1Os/0+okounPTdmxZy8YbzhL2+Sc5Crz12Pu6oR6VnC3k/85JZ5929ceq4IyED0oAAAAAAAAAAAAAAAAAAAAAAAAAAAAHmTAy2V3mrmaGlqm4x8S5RfRDKSc8bR+ZfBq5t4rOlLuq3ByfQ/tZuP8OP4dvU5dzDzRFtTlW30VOcYw3rrqU4Rk8/VZmayvTp+Se9fkUxjn7ek1LmyyujM5f6ixuM7ZNKzfMlVWl91JY7FOr4hPX6irSOdsqLk5xhU0nc+/RbJ7p57/oeOXNBqtRbbKur95up8OyLk04YckuuOe0sPt8M7HylyDotFNX11vxnFrzTcow6sdUYJ9jmc/ta3qT5Hz8H5J6K49TjCcP9qqEV4VW3ovWXvJ7kLq+B2aad3hVxrlZhxjZOb08pdTcnGOcQlLPf39DqEDxfRGacZRTT7pjXj5Znkscy4PzJbTPw5Rdc93+7WyWJLO7qktp/5Ltw7mTT2J5l4ck8NT29O5FcwcqqdbjGtXQbz4csZhJNNShLuiu38FvjKL8a6qEYRhKqFCltGKTxPdvLy/1Jy6zWr66SnE9ZKWqush54Rgsb4+6nnD9u59/ICTg5Qk3U6q1F4xl7yz/chq+FX6leDCudVDeLZzXTOyP4f5Yv19WXvhPDo0VKtb43bxjf8vY74s23mm7OOI+1GTCMnoRAAAAAAAAAAAAAAAAAAAAAAAAAMmnU6mEFmc4xXvKSj/kDY5Lv6e/oVrinOOmh1xhLxJw74w4J+7ZB89c3UQofVZKumeVGcdrrmvppj+H3k9iu8u8kS4hRXdqbLKabW511UyS6oekZv0eNn/ZonrVvSmcyfdNWn1N3Frb4wsl4dXT4lyeyWWm4r1xv2Po4tyJdp411UON8bbIeJO2GYzcmo2eKo5xHpWcLu38F75Y5XWlTasxt0QrpSrpjD0Sh6v3by2WKqrp938t7nJh3XkRfAeW9Jo/F/d6VV4slKzpbw2lts+y+CYSCMlUgAADGDIA84MoyAAAAAAAAAAAAAAAAAAAAAAAAGwBjJ5ssSTbeEllt9kl6lP43zhFxkqJxUfq1EmumK7NozrUz21nN10m+NcwU0eTPXc15aY/e37Z9jk/OHNHiTvrmlfbVV1uuuf2dKylKO33pqLey/XBWuYeNNznOmyfXfUrXNylGd1NmYNxfePT0vb2yXn9nXKNdumquhWq6LoKVjniVlu7Tjn6YZXZb+uSd512pOM9KfyJoHrddKHTG2calOrU3dU1GtPytxbacu+F2TR3fhnCPCqjWrbJJby65OTk33znt+Swa+A8s6PRdf7vTGvrfmabbfxv2RMJFfWJ3RGOFj0MgHWQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMZAy2arrVGLb7RWW3stvkiOauZtPoafEs6pSm+mqqCTnOXpGK/8nM+N8/6iUW5VqObemmtPH09WZZfnku3sZuuGs55SfM/ObshNf7dcW06svqnul5vZNPOexQ+HUR12plTGVng1+eGlpwvEw1B+f6Fl7vvusYJTlTljU662vUu2ybnJz1Ksr6IKLi4qnf70k92+2yWPU6PyR+z2nh9s71bK2bg4Q6koxhBz62kl3baju/wmM5+81S6knEfHo/2baa2FX7zBZq2qrpbgoV7fZZW7X+d/cvei0sKoRrhFRhCKjCMdkorZJG5IyUk4St5AAdcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGGz5HxKnLj4iyu++yx3yznI+vqITjnHVVGSh0ysik55fTGuOV5rH6e6XdkNzRzhXTDPW4Qk8Q6Vm654+5TB9l/N6Lc53rdTqNXKMZQddSl1rTRnGXRL0nZnec3+N7L0RPXk/iuPHz2xzPxp33uSsc+iSUZ2w8KTm9niHdQfonh+uDdqv2favW20SrioabMXN2NxlXJNdThFrMs/pn4LdyNyvU5eLZFTUMeHlPp8TLbeG/M/5v8AB0RROePP615N8f5jTo9LGuEa4pKMVhbf3N4MlkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABnlyMTswm/ZZKzdxy1V23NxioQ8TpxldOO3u2Z1qZ7ameU5xLWQhCWZYck1FL7zeOyOc8Z5n08K76Kn13zrlXKC/hWdOOtv33yRPFuYr9U/spSrrksWXSX2ks/w619K9Ca5Y5CjNQnbF11LdV58833zN+xLXOqrmTE+q7yzy9qtXZ4kpO21pK3VzWYxWEvDrXxj0OpcL5U0lNah0db7ynNtylL1bZM6bTQrioQioxXaKWEkbSkxP1PW7enmutRSSSSXZJYWD2AbYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDDZ8s+IU5kvEgnFPOZYwvc+fjusVdM/NiU01BfU36pLvsstv0RzrjPHYT09mnon4l16jKFkXFKtdXU5OUlj0x6r39iW/J63hTHj9lh5l5uhCPTBvzryqKxbYv5V/Dg/wAT7+iZRr4a/U2QqzlN5WlUt4Ql6zljbZdiT5e4JdqZudbfmk3drZpt59VSpb5/nf6I6TwTgdOlgo1rfvKbfVJv1bb3b+XlmJm7+1T2mOkRyxyjXQoztSlalssLpgvaKLUkEjJfOZELbewAHXAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGHIr/HeZq6E1HEpru+8U/SO3d/CJvU0KcZQecSWHh4Oba3SuuxwtSU4N+CoZlmLbUZxX4mT8mrJ8U8eZb9RfGOJzsbdilKVmMU97JLOUp47R/kX6sluWeUXqMT1KxUsONax0zfy/WPx2zu3J7klyZwKE3K+2qUXGbjCNqfW2n5pvP0v0SLwodvgzjx/ta3vj5HmiiMIqMUlFdkjZgyCyIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGrwI92k2vXCybQBjBkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/2Q==">
        <p class="flute-description">The contra-alto flute is pitched one octave below the alto flute, so the range of the flute is more of a baritone range. To play this flute, it is close to required that you mastered circular breathing, since this flute requires SO MUCH AIR. This flute has a deep, warm, and ringing sound. The standard range for the contra-alto flute is G2-D5.</p></div>
      </section>
      <section id="contrabass-flutes">
        <div class="wrap"><img class="flute-picture" alt="contrabass" src="https://media.musicarts.com/is/image/MMGS7/J47626000000001-00-2000x2000.jpg">
        <p class="flute-description">The contrabass flute has the range of a bass singer, so it would be more logical to call this flute the "bass flute". It is pitched two octaves below the C flute. This flute requires even more air than the contra-alto, so it is more imperative that you know circular breathing. The contrabass flute has a standard range of C2-C5.</p></div>
      </section>
      <section id="pre-order">
        <p>If you would like to pre-order one of our flutes, please fill out the form below.
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <h3>Email</h3>
          <input id="email" name="email" placeholder="someone@example.com" type="email">
          <h3>Type of Flute</h3>
          <input type="radio" id="flute" name="choose-flute">
          <label for="flute">C Flute</label><br>
          <input type="radio" id="piccolo" name="choose-flute">
          <label for="piccolo">Piccolo</label><br>
          <input type="radio" id="alto-flute" name="choose-flute">
          <label for="alto-flute">Alto Flute</label><br>
          <input type="radio" id="bass-flute" name="choose-flute">
          <label for="bass-flute">Bass Flute</label><br>
          <input type="radio" id="contra-alto-flute" name="choose-flute">
          <label for="contra-alto-flute">Contra-Alto Flute</label><br>
          <input type="radio" id="contrabass-flute" name="choose-flute">
          <label for="contrabass-flute">Contrabass Flute</label><br>
          <input type="submit" id="submit">
        </form>
      </section>
    </main>
  </body>
</html>

* {
  background-color: lavender;
  box-sizing: border-box
}

#header-img {
  width: 250px;
  height: 250px;
  display: block;
  margin: auto;
}

header {
  background: repeating-linear-gradient(
    65deg,
    red,
    red 5%,
    blue 5%,
    blue 10%
  );
}

.flute-category {
  list-style-type: none;
  padding-left: 63px;
  display: inline;
}

#nav-bar {
  background-color: rgb(224, 141, 135);
}

#nav-link {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#company-name {
  font-family: Verdana, Tahoma;
  text-align: center;
  font-size: 3em;
}

.description {
  font-family: Tahoma;
  font-size: 1.15em;
}

.wrap {
  display: flex;
}

.flute-picture {
  width: 20%;
  height: 20%;
  float: left;
}

#flute-description {
  float: left;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 2.5%;
  font-family: georgia;
}

@media (font-family: georgia) {
  #flute-description {
    font-size: 2em;
  }
} 

iframe {
  margin-left: 20%;
}

There is my new code. I used Nu HTML checker to remove all the errors, but tests 9, 10, and 23 are still not fulfilled.

7

I just resolved test 23, but I still need nine and 10

8

if the .nav-link element needs to have a href, maybe you need to change element

9

thank you, what I did was I put the li element inside of the anchor tag

10

that is illegal nesting, you can’t put a li inside an a element. you should give the class to the anchor element instead, without changing the relative position of the elements