Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
	<title>Technical Documentation</title>
	<style>
		#navbar {
			position: fixed;
			top: 0;
			left: 0;
			height: 100%;
			width: 200px;
			background-color: #f8f8f8;
			overflow-y: auto;
		}
		
		.main-section {
			padding: 20px;
			margin-top: 50px;
			background-color: #fff;
		}
		
		h1, h2, h3, h4, h5, h6 {
			margin-top: 0;
		}
		
		code {
			font-family: monospace;
			background-color: #f8f8f8;
			padding: 2px;
		}
		
		@media only screen and (max-width: 768px) {
			#navbar {
				position: relative;
				height: auto;
				width: 100%;
				background-color: #fff;
			}
		}
	</style>
</head>
<body>
	<nav id="navbar">
		<header>Technical Documentation</header>
		<ul>
			<li><a class="nav-link" href="#Introduction">Introduction</a></li>
			<li><a class="nav-link" href="#Section_1">Section 1</a></li>
			<li><a class="nav-link" href="#Section_2">Section 2</a></li>
			<li><a class="nav-link" href="#Section_3">Section 3</a></li>
			<li><a class="nav-link" 
			href="#Section_5">Section 5</a></li>
			<li><a class="nav-link"
			href="#Section_4">Section 4</a></li>
 
		</ul>
	</nav>
	
	<main id="main-doc">
		<section class="main-section" id="Introduction">
			<header>Introduction</header>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec blandit enim. Morbi tincidunt nibh turpis, ac venenatis velit imperdiet quis. Nullam interdum, enim et dapibus blandit, nunc urna feugiat purus, vitae scelerisque mauris sapien eget libero.</p>
			<p>Sed hendrerit, nisl eget dictum faucibus, nibh velit dapibus lacus, eu aliquam eros ante vitae nunc. Fusce sit amet est vitae purus bibendum tempor.</p>
			<code>console.log("Hello, world!");</code>
			<ul>
				<li>List item 1</li>
				<li>List item 2</li>
				<li>List item 3</li>
				<li>List item 4</li>
				<li>List item 5</li>
			</ul>
		</section>
		
		<section class="main-section" id="Section_1">
			<header>Section 1</header>
			<p>Donec dignissim felis eu enim malesuada, ut pretium lacus sollicitudin. Ut eget enim quis eros pretium consectetur. Aliquam auctor magna et lacus venenatis, ac malesuada mauris dictum. Nunc finibus nulla ac justo bibendum, in euismod libero eleifend. Nulla facilisi. In maximus, magna eu dictum malesuada, felis purus finibus tortor, vel feugiat dolor quam eget neque.</p>
			<p>Vivamus suscipit orci vel met</p>
      </section>
      </body>
      </html>





/* file: styles.css */
```css
* {
  background-color: #3a3240;
}
a {
  color: #92869c;
}
a:hover {
  background-color: #92869c;
  color: #3a3240;
}
#navbar {
  border-style: solid;
  border-width: 5px;
  border-color: #92869c;
  height: 100%;
  top: -5px;
  left: -5px;
  padding: 5px;
  text-align: center;
  color: #92869c
}
@media (min-width: 480px) {
  #navbar {
    position: fixed;
  }
}
main {
  margin-left: 220px;
  color: #92869c
}
header {
  font-size: 20pt;
}
code {
  background-color: #92869c;
  border-style: dashed;
  border-width: 2px;
  border-color: #92869c;
  padding: 5px;
  color: black;
}
footer {
  text-align: center;
}

**Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36</code>

**Challenge:** Technical Documentation Page - Build a Technical Documentation Page

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page

We Need more details to be able to help, What is the error exactly?

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