Hi guys. I’ve been working on this challenge for a bit and I have all the other requirements met but I can’t seem to get the media query to work. Please let me know if you guys see anything. Here’s my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Technical Documentation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta rel="stylesheet" href="styles.css" />
</head>
<body>
<main id="main-doc">
<nav id="navbar">
<header>Nav Bar</header>
<ul>
<li><a href="#header_1" class="nav-link">header 1</a></li>
<li><a href="#header_2" class="nav-link">header 2</a></li>
<li><a href="#header_3" class="nav-link">header 3</a></li>
<li><a href="#header_4" class="nav-link">header 4</a></li>
<li><a href="#header_5" class="nav-link">header 5</a></li>
</ul>
</nav>
<section class="main-section" id="header_1">
<header>header 1</header>
<p>ph1</p>
<p>ph1</p>
<li>li1</li>
<code></code>
</section>
<section class="main-section" id="header_2">
<header>header 2</header>
<p>ph2</p>
<p>ph2</p>
<li>li2</li>
<code></code>
</section>
<section class="main-section" id="header_3">
<header>header 3</header>
<p>ph3</p>
<p>ph3</p>
<li>li3</li>
<code></code>
</section>
<section class="main-section" id="header_4">
<header>header 4</header>
<p>ph4</p>
<p>ph4</p>
<li>li4</li>
<code></code>
</section>
<section class="main-section" id="header_5">
<header>header 5</header>
<p>ph5</p>
<p>ph5</p>
<li>li5</li>
<code></code>
</section>
</main>
</body>
</html>
#navbar
{
text-align: left;
}
body {
width: 700px;
}
@media (max-width: 900px) {
body {
background-color: black;
}
}