Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

This is what it is telling me. I have tried to figure out what I am doing wrong. Any suggestions?
Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_) for the id’s.
Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

Your code so far

<!-- file: index.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>

    <body>
  <main id="main-doc">
    <section class="main-section" id="Renters_Insurance">
    <header>Renters Insurance</header>
    <p>Paragraph 1</p>
    <p>paragraph 2</p>
    <code></code>
    <li>Required Renter's Insurance</li>
    </section>

    <section class="main-section" id="Pet_Policies">
    <header>Pet Policies</header>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <code></code>
    <li>Pet Policies in place</li>
    </section>

    <section class="main-section" id="Rental_Criteria">
    <header>Rental Criteria</header>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <code></code>
    <li>Rental criteria explained</li>
    </section>

    <section class="main-section" id="Floor_Plans">
    <header>Floor Plans</header>
    <p>Paragraph 7</p>
    <p>Paragraph 8</p>
    <code></code>
    <li>Floor Plan 1</li>
    </section>

    <section class="main-section" id="Color_Options">
    <header>Color Options<header>
      <p>Paragraph 9</p>
      <p>Paaragraph 10</p>
      <code></code>
      <li>Color 1</li>
      </section>

      </main>
      </body>
      
      <nav id="navbar">
        <header>Apartment Rental</header>
          <a class="nav-link" href="#Renters_Insurance">Renters Insurance</a>
          <a class="nav-link" href="#Pet_Policies">Pet Policies</a>
          <a class="nav-link" href="#Rental_Criteria">Rental Criteria</a>
          <a class="nav-link" href="#Floor_Plans">Floor Plans</a>
          <a class="nav-link" href="#Color_Options">Color Options</a>
         </nav>
</html>
/* file: styles.css */
@media only screen and (max-height: 600px) {
body {
background-color: lightblue;
}
}

#navbar {
  position:fixed;
  left:0;
  adding: 20px;
}

#navbar header{
margin-bottom:7;
font-size:1.618em;
}

#navbar a{
  display:block;
  margin-bottom:12px;
  text-decoration:none;
}

#main-doc{
  margin-left: 200px;
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

You might want to make sure you have closed all of your header elements correctly.

@bbsmooth Thank you so much, I appreciate your help!

1 Like