Technical Documentation Page - Build a Technical Documentation Page

I can’t seem to get my navbar to run along the whole page

Your code so far


The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html> 
<html lang="en">
  <head><link rel="stylesheet" href="styles.css"></head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="UTF-8" />
    <title>Concert Band</title>
      <nav id="navbar"><header><strong>Concert Band</strong></header>
        <li><a class="nav-link" href="#Origins">Origins</a></li>
        <li><a class="nav-link" href="#Brass">Brass</a></li>
        <li><a class="nav-link" href="#Woodwinds">Woodwinds</a></li>
        <li><a class="nav-link" href="#Percussion">Percussion</a></li>
        <li><a class="nav-link" href="#Conductor">Conductor</a></li>
        <li><a class="nav-link" href="#Favorite_Composers">Favorite Composers</a></li>
      <main id="main-doc">
        <section class="main-section" id="Origins">
            <p><b>French Revolution</b></p>
              <li>Large bands used to perfrom patriotic music at festivals and gatherings</li>
              <li>During the French Revolution, composers were not interested in writing music for large bands</li>
              <li>This forced bands to transpose music meant for orchestras</li>
              <p><b>Current Day</b></p>
              <ul><li>The practice of transcription of orchestral/operatic pieces for concert bands is still in practice today</li><li>During the 19th, military bands were the main form of "concert band" for ceremonies and festivals in Britain and America</li><li>The 20th saw a serious turn for concert bands when serious composers started writing and arranging music for them</li></ul><code>"First Suite for Band" was written in 1909 by Gustsav Holst</code></article></section>
        <section class="main-section" id="Brass"><header>Brass</header><article><p>Lower Register</p><ul><li>Tuba</li><li>Baritone</li><li>Euphonium</li></ul><p>Higher Register</p><ul><li>Trombone</li><li>Trumpet</li><li>French Horn</li></ul><code>Here's a <a href="">link</a> to listen to music featuring Brass</code></article></section>
        <section class="main-section" id="Woodwinds"><header>Woodwinds</header><article><p>Lower Register</p><ul><li>Baritone Saxophone</li><li>Bassoon</li><li>Bass Clarinet</li></ul><p>Higher Register</p><ul><li>Flute</li><li>Alto Saxophone</li><li>Oboe</li></ul><code>Interesting Fact: The organ is actually a Woodwind</code></article></section>
        <section class="main-section" id="Percussion"><header>Percussion</header><article><p>Main Instruments</p><ul><li>Bass Drum</li><li>Crash Cymbal</li><li>Xylophone</li></ul><p>Auxiliary</p><ul><li>Maracas</li><li>Claves</li><li>Bells</li></ul><code>Here's a <a href="">link</a> to listen to music featuring the Timpani</code></article></section>
        <section class="main-section" id="Conductor"><header>Conductor</header><article><p>Keeping Time</p><ul><li>Conductors need to be observant of every sections time signatures so everyone knows how fast or slow to play</li></ul><p>Keeping Dynamics</p><ul><li>Conductors also need to express how softly, loudly or how to "attack" notes</li></ul><code>Here's a <a href="">link</a> to listen to music featuring many different sections, even piano</code></article></section>
        <section class="main-section" id="Favorite_Composers"><header>Favorite Composers</header><article><ul><li>Gustav Holst</li><li>Ralph Vaughn Williams</li><li>Joseph Shwantner</li></ul></article></section>

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Here’s my styles.css
html, body {
min-width: 290px;
color: #4d4e53;
background-color: #ffffff;
font-family: Arial, sans-serif;
line-height: 1.5;

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);
padding: 0;
margin: 0;
#navbar li {
color: #4d4e53;
border-top: 1px solid;
list-style: none;
position: relative;
width: 100%;
overflow: scroll;
#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px
#main-doc hearder {
text-align: left;
margin: 0px;
section article {
color: #4d4e53;
margin: 15px;
font-size: 0.96em;
overflow: scroll;
section li {
margin: 15px 0px 0px 20px;
overflow: scroll;
@media (max-width 150px) {
navbar {
width: 100px;

  • the closing </head> is positioned at the wrong place
  • the html closing tag is not valid </hthml>
  • the ‘navbar’ selector is an id. You have missed to add the # before it in css

Awesome, that solved it. Thank you so much!

1 Like

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