Technical Documentation Page - Build a Technical Documentation Page

**Tell us what’s happening:
I can’t figure out how to pass the test “ 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.”

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Cook book</title>
    <meta charset="UTF-8">
    <meta name="viewport"
content-"width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <nav id="navbar">
     <header>
       <h1 id="head-words">COOK BOOK</h1>
     </header>
     <a href="#Corn" class="nav-link"><p>Corn</p></a>
     <a href="#Pizza" class="nav-link"><p>Pizza</p></a>
     <a href="#Tires" class="nav-link"><p>Tires</p></a>
     <a href="#Swords" class="nav-link"><p>Swords</p></a>
     <a href="#Guns" class="nav-link"><p>Guns</p></a>
    </nav>
    <main id="main-doc">
      <section class="main-section" id="Corn">
        <header>
          <h2>Corn</h2>
        </header>
        <p>corn is tasty, unless you don't like corn</p>
        <h3>Prep:</h3>
        <p>salt and pepper</p>
        <li>manditory list
          <ul>peas</ul>
          <ul>7.62 rounds</ul>
        </li>
      </section>
      <section class="main-section" id="Pizza"> 
       <header>
         <h2>Pizza</h2>
       </header>
       <p>Pizza is really greasy, but it's also tasty</p>
       <h3>Prep:</h3>
       <p>deep fry and salt</p>
       <li>mandtory list 2: electric boogalo
         <ul>snow/dirt/water mixture</ul>
         <ul>john deer lawsuit</ul>
       </li>
      </section>
      <section class="main-section" id="Tires">
        <header>
          <h2>Tires</h2>
        </header>
        <p>Tires can be rubbery, but it's a good way to get minerals</p>
        <h3>Prep:</h3>
        <p>take off of the car in case it starts to drive away</p>
        <li>list3
          <ul>money money money</ul>
          <ul>the irs</ul>
        </li>
        </section>
        <section class="main-section" id="Swords">
          <header>
            <h2>Swords</h2>
          </header>
          <p>Swords are cool party trick</p>
          <h3>Prep:</h3>
          <p>eat the sheath first so you don't cut your throat</p>
          <li>listo numero 4
            <ul>pinyata</ul>
            <ul>bran damig</ul>
          </li>
          </section>
          <section class="main-section" id="Guns">
            <header>
             <h2>Guns</h2>
            </header>
            <p>Guns, unless they're unloaded, wouldn't recomend it, not after the accident</p>
            <h3>Prep:</h3>
            <p>remove bullets and any tac attachments</p>
            <li>FINAL LIST
              <ul>watercraft</ul>
              <ul>g a m i n g</ul>
            </li>
            <h2>required code</h2>
            <code>id="food"</code>
            <code>class="gaming"</code>
            <code>gun="true"</code>
            <code>pain="yes"</code>
            <code>your-father="gone"</code>
          </section>
    </main>
  </body>
</html>
/* file: styles.css */
@media(max-width: 4096px) {
#navbar{
  background-color: lightgrey;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.nav-link{
  padding-left: 10;
  padding-top: 6;
}
#head-words{
  padding-left: 5;
}
#main-doc{
  padding-top: 100;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

I just tested your code above and it passed for me.

Dang, must be broken for me or something, thanks though

One thing that could be causing a problem is that both your HTML and CSS have validation errors. Some browsers may fix these automatically (I’m using FF) while others may not fix them as well and thus the browser you are using isn’t fixing all of them.

I would run your HTML through a validator and fix all the errors.

For your CSS, you are missing the closing curly brace on your media query.

P.S. I’m not guaranteeing that this will fix your issue. But it’s worth a try.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.