Tell us what’s happening:
Cannot pass te last user story about the one media query. I ave also inserted the command
@media (max-width: 1199px) and (min-width: 769px) {
#main-doc {
width: 800px;
}
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Documentation</title>
<link rel="stylesheet" href="./styles.css">
<nav id="navbar">
<header>COSMOS PRODUCTION</header>
<ul>
<li>
<a class="nav-link" href="#Partnership">Partnership</a>
</li><li>
<a class="nav-link" href="#Code_share_definition">Code share definition</a>
</li>
<li>
<a class="nav-link" href="#Flight">Flight</a>
</li>
<li>
<a class="nav-link" href="#Distribution">Distribution</a>
</li>
<li>
<a class="nav-link" href="#Simulation">Simulation</a>
</li>
</ul>
</nav>
</head>
<body>
<main id="main-doc">
<section class="main-section" id="Partnership">
<header>Partnership</header>
<p>1</>
<p>2</>
<p>3</>
<p>4</>
<p>5</>
<p>6</>
<p>7</>
<p>8</>
<p>9</>
<p>10</>
</section>
<section class="main-section" id="Code_share_definition">
<header>Code share definition</header>
<code>Code 1</code>
<code>Code 2</code>
<code>Code 3</code>
<code>Code 4</code>
<code>Code 5</code>
</section>
<section class="main-section" id="Flight">
<header>Flight</header>
<li>Li1</li>
<li>Li2</li>
<li>Li3</li>
<li>Li4</li>
<li>Li5</li>
</section>
<section class="main-section" id="Distribution">
<header>Distribution</header>
</section>
<section class="main-section" id="Simulation">
<header>Simulation</header>
</section>
</main>
</body>
</html>
/* file: styles.css */
#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)
}
nav {
display: block;
unicode-bidi: isolate;
}
body {
display: block;
margin: 8px;
}
header {
display: block;
unicode-bidi: isolate;
html, body {
min-width: 290px;
color: #4d4e53;
background-color: #ffffff;
font-family: 'Open Sans', Arial, sans-serif;
line-height: 1.5;
#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}
main {
display: block;
unicode-bidi: isolate;}
@media (min-width: 769px) {
body {
display: flex;
flex-direction: row;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page