Position: sticky not sticking sidebar on the left

[kennethkristopher27]

I am working on the technical documentation page and I can’t seem to get the sidebar to stick. I tried using position: fixed, however, it messes the layout. How do I get the sidebar to stick on the left?

<main id="main-doc">
  <nav id="navbar">
    <header id="nav-title"><h1>JS Documentation</h1></header>
    <a class="nav-link" href="#introduction">Introduction</a>
    <a class="nav-link" href="#hello_world">Hello World</a>
    <a class="nav-link" href="#variables">Variables</a>
    <a class="nav-link" href="#declaring_variables">Declaring Variables</a>
    <a class="nav-link" href="#global_variables">Global Variables</a>
  </nav>
  <div id="content">
  <section id="introduction" class="main-section">
    <header><h2>Introduction</h2></header>
    <p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
    <p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
    <code></code>
    <li></li>
  </section>
  <section id="hello_world" class="main-section">
    <header>Hello world</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section id="variables" class="main-section">
    <header>Variables</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section id="declaring_variables" class="main-section">
    <header>Declaring Variables</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section id="global_variables" class="main-section">
    <header>Global Variables</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  </div>
</main>

*{
  box-sizing: border-box;
}
#main-doc{
  display: flex;
}

#content{
  width: 1000px;
}

#navbar{
  display: flex;
  flex-direction: column;
  border: 2px solid black;
  width: 250px;
  position: sticky;
  top: 0;
}

#nav-title{
  text-align: center;
}

.nav-link{
  border-top: 2px solid black;
  height: 35px;
  padding: 5px 0 0 10px;
}

@media (max-width: 1000px){
  background-color: grey;
}

.main-section{
  padding-left: 10px;
}

[pawantekade22]

hey @kennethkristopher27, I hope you having a great time coding.

Suggestions

1. Please go through this article position CSS tricks

2. hint remove the default CSS on the body because it will affect your desired results.

You are on the right track.
hope it will help out