Here are my 2 errors. Thanks!
Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.
Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).
HTML
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main-doc">
<section class="main-section" id="HTML_header_element">
<header>HTML header element
<section>
<nav id="navbar"><header >HTML Header Documentation</header>
<ul class="navbar">
<li> <a class="nav-link" href="#HTML_header_element">HTML header element</a></li>
<li> <a class="nav-link" href="#Usage_Notes">Usage Notes</a></li>
<li><a class="nav-link" href="#Historical_Usage">Historical Usage</a></li>
<li><a class="nav-link" href="#Attributes">Attributes</a></li>
<li> <a class="nav-link" href="#Examples">Examples</a></li>
</ul>
</nav>
</header>
<p>The <code>header</code> element represents introductory content, typically a group of introductory or navigational aids.</p>
<p>para2</p>
</section>
<section class="main-section" id="Usage_Notes">
<header>Usage Notes</header>
<p>Usage Notes-The <code>header</code> element is not sectioning content and therefore does not introduce a new section in the outline. </p>
<p>para4</p>
</section>
<section class="main-section" id="Historical_Usage">
<header>Historical Usage</header>
<p>Historical Usage - Although the<code>header</code> element didn't make its way into specifications until HTML5, it actually existed at the very beginning of HTML. As seen in the very first website, it was originally used as the <code>head</code> element. At some point, it was decided to use a different name. This allowed <code>header</code> to be free to fill a different role later on.</p>
<p>para6</p>
<ul id="tomato">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</section>
<section class="main-section" id="Attributes">
<header>Attributes</header>
<p>Attributes para7 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, p</p>
<p>para8 amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, p</p>
</section>
<section class="main-section" id="Examples">
<header>Examples</header>
<p>Examples -para9 vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, p</p>
<p>para10 Lorem ipsum dolor sit porta. Mauris massa. taciti sociosqu ad litora torquent per conubia nostra, p</p>
</section>
</div>
</main>
</body>
</html>
CSS
#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}
header {
text-align:center;
}
p{
text-align:center;
font-family: Lobster, sans-serif;
color: #4545;
}
ul{
list-style-type:none;
font-size: .85em;
}
li{
margin-bottom: 8px;
}
#navbar{
width: 220px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #fff;
overflow-x: hidden; /* Disable horizontal scroll */
}
ul#navbar{
list-style:none;
margin: 10;
padding: 10px;
width: 22%;
background-color: #f1f1
position: fixed;
height: 100%;
overflow: auto;
}
ul.navbar li a {
display: block;
color: #4545;
paf1;dding: 8px 16px;
text-decoration:none;
list-style:none;
}
header{
font-size:1.25em;
font-weight:400;
font-family: Lobster, sans-serif;
color:#FF5733}
ul#tomato{
color:#C70039;
text-align: center;
}
ul#tomato li{
list-style: none;
}
@media(max-width: 576px) {
#navbar{
font-size: .8em;
}
}
