Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
My media query does not pass the requirements. Tried many time with different option, never helped. I need help brothers and sisters!

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang='en'>
<head>
  <title>Techincal Documentation Page</title>
  <meta charset='UTF-8'>
  <meta content='width=device-width, initial-scale=1.0'
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <main id="main-doc">
    <nav id='navbar'>
      <header>Python and APIs</header>
      <a class='nav-link' href='#intro'>Intro</a>
        <a class='nav-link' href='#python'>Python</a>
         <a class='nav-link' href='#api'>API</a>
            <a class='nav-link' href='#maven'>Maven</a>
              <a class='nav-link' href='#css'>CSS</a>
    </nav>

    <section id='intro' class='main-section'>
      <header>Intro</header>
      <p class='lorem'>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum dolor voluptas itaque unde illo eveniet inventore rerum
vitae, laboriosam fugit, odit iusto incidunt odio. Nemo nesciunt placeat dolor totam facilis!</p>
<ul>
<li>You will learn some HTML</li>
<li>We will create small project</li>
</ul>

    </section>
    <section id='python' class='main-section'>
      <header>Python</header>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum dolor voluptas itaque unde illo eveniet inventore rerum
vitae, laboriosam fugit, odit iusto incidunt odio. Nemo nesciunt placeat <code>dolor</code> totam facilis!</p>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum dolor voluptas itaque unde illo eveniet inventore rerum
vitae, laboriosam fugit, <code>odit</code> iusto incidunt odio. Nemo nesciunt placeat dolor totam facilis!</p>
    </section>
    <section id='api' class='main-section'>
      <header>API</header>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum dolor voluptas itaque unde illo eveniet inventore rerum
vitae, laboriosam fugit, odit iusto incidunt odio. Nemo nesciunt placeat dolor totam facilis!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum dolor voluptas itaque unde illo eveniet inventore rerum
vitae, laboriosam fugit, odit iusto incidunt odio. Nemo nesciunt placeat dolor totam facilis!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum dolor voluptas itaque unde illo eveniet inventore rerum
vitae, laboriosam fugit, odit iusto incidunt odio. Nemo nesciunt placeat dolor totam facilis!</p>
    </section>
    <section id='maven' class='main-section'>
      <header>Maven</header>
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing <code>elit<code>. Eum dolor voluptas itaque unde illo eveniet inventore rerum
vitae, laboriosam <code>fugit</code>, odit iusto incidunt odio. Nemo nesciunt placeat dolor totam facilis!</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
    </section>
    <section id='css' class='main-section'>
      <header>CSS</header>
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing <code>elit<code>. Eum dolor voluptas itaque unde illo eveniet inventore rerum
vitae, laboriosam <code>fugit</code>, odit iusto incidunt odio. Nemo nesciunt placeat dolor totam facilis!</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing <code>elit<code>. Eum dolor voluptas itaque unde illo eveniet inventore rerum
vitae, laboriosam <code>fugit</code>, odit iusto incidunt odio. Nemo nesciunt placeat dolor totam facilis!</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing <code>elit<code>. Eum dolor voluptas itaque unde illo eveniet inventore rerum
vitae, laboriosam <code>fugit</code>, odit iusto incidunt odio. Nemo nesciunt placeat dolor totam facilis!</p>
    </section>

  </main>
</body>

</html>
/* file: styles.css */
main {
padding: px;
}

@media (max-width: 768px) {
.nav-link {
  width: 358px;
}
}

  **Your browser information:**

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

@MylenRouge no problem with media query but you should give property to main nav, not to the nav link because it nav-link is an element of nav so all effects like width will on the nav

1 Like

Hello!
It seems like my style.css does not work at all, as I am trying to change parameters and still nothing happening even tho I putted a link from the “stories”.

Ok, my link was under 2 meta elements. I putted it upon Title element and my css started begin to work. Thank you for help!

always welcome @MylenRouge