"Technical Documentation project" media query issue

I have “Your Technical Documentation project should use at least one media query” issue

But i’m already use <link rel="stylesheet" href="styles.css">
thanks in advance for your help

/* file: index.html */
<!DOCTYPE html>
  <title>Technical Documentation Page</title>
  <link rel="stylesheet" href="styles.css">
      <main id="main-doc">
        <nav id="navbar">
          <header>Brand Logo</header>
          <a class="nav-link" href="#main1">main1</a>
          <a class="nav-link" href="#main2">main2</a>
          <a class="nav-link" href="#main3">main3</a>
          <a class="nav-link" href="#main4">main4</a>
          <a class="nav-link" href="#main5">main5</a>
        <section class="main-section" id="main1">
          <code>code tag</code>
        <section class="main-section" id="main2">
          <code>code tag</code>
        <section class="main-section" id="main3">
          <code>code tag</code>
        <section class="main-section" id="main4">
          <code>code tag</code>
        <section class="main-section" id="main5">
          <code>code tag</code>
/* file: styles.css */
  padding: 10px;
nav header{
nav a{
text-decoration: none;
color: #222;
text-transform: uppercase;
border: 1px solid #222;
transition: 400ms all;
nav a:hover{
background-color: black;
color: whitesmoke;
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0

Challenge: Build a Technical Documentation Page

Link to the challenge:

Careful, a media query is one that uses @media in CSS for example @media screen and (min-width: 400px) {
Insert CSS selectors here that you want to have effect when screen width is 400px or wider

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