Technical Documentation Page - Build a Technical Documentation Page

Im trying this test but my css isnt applying I never had this problem,
my code:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="navbar">
<header>Dieta pro</header>
<ul>
<li>
<a class="nav-link" href="#Chiken">Chiken</a>
</li>
<li>
<a class="nav-link" href="#Beef">Beef</a>
</li>
<li>
  <a class="nav-link" href="#Sweet_potato">Sweet potato</a>
</li>
<li>
  <a class="nav-link" href="#Potato">Potato</a>
</li>
<li>
  <a class="nav-link" href="#Rice">Rice</a>
</li>
<li>
  <a class="nav-link" href="#Reference">Reference</a>
  </li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Chiken">
<header>Chiken</header>
<article>
          <p>
            Chicken is the most common type of poultry in the world.
            Owing to the relative ease and low cost of raising chickens in comparison to mammals such as cattle or hogs chicken meat (commonly called just "chicken") and chicken eggs have become prevalent in numerous cuisines.
          </p>
          <p>
            The amount of calories in chicken can range based on the specific cut, along with the way that it’s prepared. However, most popular varieties contain 155–203 calories per 3.5-ounce (oz.), or 100-gram (g), serving.
          </p>
<ul>
<li></li>
<li></li>
</ul>
<p>
  <code>function square(number) { return number * number; }</code>
</p>
</article>
</section>
<section class="main-section" id="Beef">
<header>Beef</header>
<article>
<p></p>
<p></p>
<ul>
<li></li>
<li></li>
</ul>
<p>
  <code>function square(number) { return number * number; }</code>
</p>
</article>
</section>
<section class="main-section" id="Sweet_potato">
<header>Sweet potato</header>
<article>
<p></p>
<p></p>
<ul>
<li></li>
<li></li>
</ul>
<p>
  <code>function square(number) { return number * number; }</code>
</p>
</article>
</section>
<section class="main-section" id="Potato">
<header>Potato</header>
<article>
<p></p>
<p></p>
</article>
<ul>
<li></li>
<li></li>
</ul>
<p>
  <code>function square(number) { return number * number; }</code>
</p>
</article>
</section>
<section class="main-section" id="Rice">
<header>Rice</header>
<article>
<p></p>
<p></p>
<ul>
<li></li>
<li></li>
</ul>
<p>
  <code>function square(number) { return number * number; }</code>
</p>
</article>
</section>
<section class="main-section" id="Reference">
        <header>Reference</header>
        <article>
          <ul>
            <li>
              All the documentation in this page is taken from
              <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN</a>
            </li>
          </ul>
        </article>
      </section>
</main>
</body>
</html>
CSS:
body{
  min-width: 290px;
  color: #4d4e53;
 background-color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}



#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}

header {
  color: #007AFF;
  margin: 10px;
  text-align: center;
  font-size: 1.8em;
  font-weight: thin;
}

#main-doc header {
  text-align: left;
  margin: 0px;
}

#navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  color: #4d4e53;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}

#navbar a {
  display: block;
  padding: 10px 30px;
  color: #4d4e53;
  text-decoration: none;
  cursor: pointer;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

section article {
  color: #4d4e53;
  margin: 15px;
  font-size: 0.96em;
}

section li {
  margin: 15px 0px 0px 20px;
}

code {
  display: block;
  text-align: left;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #f7f7f7;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
 /* font-size: 15px; */
}

@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #navbar ul {
    border: 1px solid;
    height: 207px;

  }

  #navbar {
    background-color: white;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
  }
}

@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;
  }

  }
}**

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

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.

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

Hi!

This is the css stylesheet link the lesson asks for

<link rel="stylesheet" href="styles.css">

This is the one you’ve used, you are missing a letter in the href.

<link rel="stylesheet" href="style.css">

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