Need help with navbar

" On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content."

I am not sure what I need to do here. I tried doing a few tweaks but it still shows up. Can anyone assist me on what I am doing wrong?
https://codepen.io/parody/pen/vYmEbeo?editors=1000

style>

    #navbar {float: left; 
      display: flex; flex-direction: column;

      background-color: #C6BCCC;border-style: groove; border-width: 2px; margin: -5px; height:100%; width:180px;

      letter-spacing: 1px; line-height: 200%;

    }

    #title {background-color: purple; margin: 10px; padding: 10px; }

    #main-doc {position: absolute; left: 210px};

      @media screen and (min-width: 400px) {

    body {

      background-color: #E4DEE7;

    }

}

    @media screen and (min-width: 800px) {

    body {

      background-color: lavender;

    }

  }

  

  </style>

  <body>

       

  <h1 id="title">

  <font color="white">  Gentoo Linux Documentation</font>

  </h1>

  <nav id="navbar">

    <header id="gentoo_install">

      Gentoo Install

            </header>

    <a class="nav-link" href="#Introduction_to_Gentoo">Introduction to Gentoo</a>

    <a class="nav-link" href="#What_you_will_need_to_know">What You Will Need to Know</a>

    <a class="nav-link" href="#Handbook">Handbook</a>

    <a class="nav-link" href="#Burning_an_ISO_file">Burning an ISO File</a>

    <a class="nav-link" href="#Starting">Starting</a>

    <a class="nav-link" href="#Terminal_Installation">Terminal Installation</a>

    </nav>

  <main id="main-doc">

    <section class="main-section" id="Introduction_to_Gentoo">

      <header id="Introduction_to_Gentoo">

        <strong>Introduction to Gentoo</strong>

        </header>

    <p>

      Gentoo Linux is a Linux distribution built using the Portage package management system. Unlike a binary software distribution, the source code is compiled locally according to the user's preferences and is often optimized for the specific type of computer. Precompiled binaries are available for some larger packages or those with no available source code. Gentoo package management is designed to be modular, portable, easy to maintain, and flexible. Gentoo describes itself as a meta-distribution because of its adaptability, in that the majority of users have configurations and sets of installed programs which are unique to the system and the applications they use.</p>

    </section>

    <section class="main-section" id="What_you_will_need_to_know">

      <header id="What_you_will_need_to_know">

        <strong>What you will need to know</strong>

        </header>

    <p>Before you do anything, here are the things you must know and do research on:</p>

      <ol>

        <li>What Gentoo is</li>

        <li>Your computer specifications, you'll need to know while installing</li>

        <li>How to find the Handbook</li>

        <li>The minimum requirements</li>

        <li>What to do after installation</li>

          </ol>

    <p>After researching these on your own, you should be ready to commence the installation process.</p>

    </section>

  

    <section class="main-section" id="Handbook">

      <header id="Handbook">

        <strong>Handbook</strong>

        </header>

    <p>The Gentoo Handbook is an effort to centralize documentation into a coherent handbook. This handbook contains the installation instructions for an Internet-based installation and additional sections for working with Gentoo's native software tools such as the OpenRC init system and the Portage package manager.</p>  

    <p>

      You may access the handbook by going to their official website. (<a target="_blank" href="https://wiki.gentoo.org/wiki/Handbook:Main_Page">wiki.gentoo.org</a>)

    </p>

    </section>

    <section class="main-section" id="Burning_an_ISO_file">

      <header id="Burning_an_ISO_file">

        <strong>Burning an ISO file</strong>

        </header>

    <p><strong>Note:</strong> It is advised to try to install Gentoo on a virtual machine if it is your first time installing. By doing this, you will become familiar with installing Gentoo and saves your computer if you were to make a mistake</p>  

    <p>

      The hardware requirements are in your specific set of the Gentoo Handbook. You need to read through it before installing. You must know this to choose which download media is right for you. After downloading you must burn the ISO file into a bootable drive.

    

   Tutorial link <a target="_blank" href="https://www.winhelponline.com/blog/windows-iso-to-usb-dvd-tool-bootable-media/">here</a>.

    </p>

    

    <p>After creating your bootable drive or CD, you will be just about ready to install Gentoo on your system.</p>

      </section>

    <section class="main-section" id="Starting">

      <header id="Starting">

        <strong>Starting</strong>

        </header>

    <p>

      After doing your research on Gentoo, figuring out your system specifications, reading the handbook, and burning and ISO file into a USB drive or disc, you will be ready to start. You will need to boot up your computer with the drive and with the handbook next to you begin the installation process. The process duration depends on your computer and your experience, but generally it will only take a couple of hours. Good luck!</p>

      

      <p><strong>Important for Linux users</strong> It should be noted you may install Gentoo without some of the before mentioned needs. Please refer below.</p>

    </section>

    <section class="main-section" id="Terminal_Installation">

    <header id="terminal-installation"><strong>Terminal Installation</strong></header>

  <p>

    You may actually run the installation through your computers terminal. But first you will have to become "root" Other Linux distributions will require a different approach, but this set of instructions is for Ubuntu and it's various distributions:</p>

    <ul>

      <li>Open up your terminal and type <code>su -</code></li>

      <li>When you get an "Authentication Error" message means you are locked from using root.</li>

      <li>Type <code>gksudo</code></li>

      <li>If you're using KDE Window Manager, you have to use <code>kdesudo</code> instead</li>

      <li>Simulate a root shell by typing <code>sudo -i</code></li>

      <li>If you need to grant root access to another account, you will need to type <code>usermod -aG sudo name</code>(make sure you use the accounts username in place of "name")</li>

      <p>

        You should be able to install Gentoo in a live environment now. the setup is basically the same without the download of the ISO and disk/drive burning.</p>

      </section>

  </main>

</body>

it had a lot of errors, for example the closing of an media query, remember to close the tag’s, another error is this:
margin: -5px; height:100%; width:180px; auto 0 auto 0;
line 4
the auto 0 auto 0, produce error,
another one is:

@media screen and (min-width: 400px) }{}

you could se that is }{} and not {}
there are a few more, however i send you the code corrected. a final point is to stick the nav we add:
float: left;
add delete:
position: fixed;

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