My media query isn't going though in build a technical documentation page

HTML-CSS
1

Screenshot_2024-10-19-16-15-53-74_40deb401b9ffe8e1df2f1cc5ba480b12
Screenshot_2024-10-19-16-15-53-74_40deb401b9ffe8e1df2f1cc5ba480b12720×1600 149 KB

2

Photos/screenshots of an error can be helpful, but it also helps to provide the complete code. Posting the code helps us help you better!

When you enter a code, 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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

3

The link element is supposed to be inside a head element. You are also missing the rest of the HTML for it to be a valid document (doctype, html, head, title, body).

4 
<!DOCTYPE html>
<html lang="en">
</html>
<main id="main-doc">
  <link="stylesheet" href="./styles.css">
  <section class="main-section" id="Technical_Documentation_Page">
    <header>Technical Documentation Page</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section class="main-section" id="1st_Header">           <header>1st Header</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section class="main-section" id="2nd_Header">
    <header>2nd Header</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section class="main-section" id="3rd_Header">
    <header>3rd Header</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section class="main-section" id="4th_Header">
    <header>4th Header</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <nav id="navbar">
    <header>Technical Documentation Page</header>

    <a class="nav-link" href="#Technical_Documentation_Page">Technical Documentation Page</a>
    <a class="nav-link" href="#1st_Header">1st Header</a>
    <a class="nav-link" href="#2nd_Header">2nd Header</a>
    <a class="nav-link" href="#3rd_Header">3rd Header</a>
    <a class="nav-link" href="#4th_Header">4th Header</a>
    
  </nav>
</main>
5

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

6

Move this to the last line of your index.html file so that all the html is descending from the html tag.

What is your question now?

7

I would suggest you re-visit the “Learn Basic CSS by Building a Cafe Menu” challenge. Do steps 1-5 and then jump to step 16. Make sure you understand what a valid document contains.

Also, "stylesheet" is the value you give to the rel attribute on the link element.

Validate HTML
https://validator.w3.org/nu/#textarea

More learning material