Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Technical Documentation Page</title>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
  </head>
  <body>
    <main id="main-doc">
      <section class="main-section" id="Introduction">
        <header>Introduction</header>
       <article>
        <ul>
          <li>
            <p></p>
            <p></p>
          </li>
        </ul>
        </article>
      </section>
      <section class="main-section" id="What_you_should_already_know">
        <header>What you should already know</header>
        <article>
        <ul>
          <li>
            <p></p>
            <p></p>
          </li>
        </ul>
        </article>
      </section>
      <section class="main-section" id="JavaScript_and_Java">
        <header>JavaScript and Java</header>
        <article>
        <ul>
          <li>
            <p></p>
            <p></p>
          </li>
        </ul>
        </article>
      </section>
      <section class="main-section" id="Hello_world">
        <header>Hello world</header>
        <article>
        <ul>
          <li>
            <p></p>
            <p></p>
          </li>
        </ul>
        <article>
      </section>
      <section class="main-section" id="Variables">
        <header>Variables</header>
        <article>
        <ul>
          <li>
            <p></p>
            <p></p>
          </li>
        </ul>
        </article>
      </section>
     
    </main>
    
    <nav id="navbar">
      <header>Introduction</header>
      <a class="nav-link" href="#Introduction">Introduction</a>
    </nav>
    <nav id="navbar">
      <a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
    </nav>
    <nav id="navbar">
      <a class="nav-link" href="#JavaScript_and_Java">javaScript and Java</a>
    </nav>
    <nav id="navbar">
      <a class="nav-link" href="#Hello_world">Hello world</a>
    </nav>
    <nav id="navbar">
      <a class="nav-link" href="#Variables">Variables</a>
    </nav>
  </body>
</html>
/* file: styles.css */
@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

hi there, I see you posted some code. Did you have a question though?

yes one step i didn’t compete

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

You should have at least five code elements that are descendants of .main-section elements.
can you tell me how to complete this step

code elements are elements that start and end with a code tag like this

<code>
  /** put code here **/
</code>