Main content and scrollspy navigation columns overlapping

I want to adjust the alignment of two elements: the left hand nav and main content div are overlapping each other. I don't have some specific conditions for them, it just should be next to each other in columns without overlaying.

Here is the code with both navigation and scrollspy. You will have to run the snippet and use the full page link to see the content.

$(function () 
        {
            $('[data-toggle="popover"]').popover()
        })

/* CSS FOR SCROLLSPY */
      body 
      {
        position: relative;
      }

      ul.nav-pills.flex-column 
      {
        top: 20px;
        position: fixed;
      }

      div.col-8 div 
      {
        height: 500px;
        margin-top: 50px;
      }

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">

    <nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="#">
            <img src="images/logo.png" alt="logo" style="width:50px;">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link active" href="#">About author</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">CCNA 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">CCNA 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-toggle="popover" title="CCNA 3" 
                    data-content="This course is already in progress. Stay tuned.">CCNA 3</a>
                </li>
            </ul>
        </div>
    </nav>



    <div class="d-none d-xl-block col-xl-2 bd-toc">
        <div class="container-fluid">
            <div class="row">
              <nav class="col-sm-3 col-4" id="myScrollspy">
                <ul class="nav nav-pills flex-column">
                  <li class="nav-item">
                    <a class="nav-link active" href="#section1">Section 1</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#section2">Section 2</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#section3">Section 3</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#section41">Link 1</a>
                      <a class="dropdown-item" href="#section42">Link 2</a>
                    </div>
                  </li>
                </ul>
              </nav>
              <div class="col-sm-9 col-8">
                <div id="section1" class="bg-success">    
                  <h1>Section 1</h1>
                  <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                </div>
                <div id="section2" class="bg-warning"> 
                  <h1>Section 2</h1>
                  <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                </div>        
                <div id="section3" class="bg-secondary">         
                  <h1>Section 3</h1>
                  <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                </div>
                <div id="section41" class="bg-danger">         
                  <h1>Section 4-1</h1>
                  <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                </div>      
                <div id="section42" class="bg-info">         
                  <h1>Section 4-2</h1>
                  <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                </div>
              </div>
            </div>
          </div>
    </div>

Solution

col-xl-2 class causes this overlaying. Remove it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
  /* CSS FOR SCROLLSPY */
  body 
  {
    position: relative;
  }

  ul.nav-pills.flex-column 
  {
    top: 20px;
    position: fixed;
  }

  div.col-8 div 
  {
    height: 500px;
    margin-top: 50px;
  }
</style>
  
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark">
    <a class="navbar-brand" href="#">
        <img src="images/logo.png" alt="logo" style="width:50px;">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav nav nav-pills">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link active" href="#">About author</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">CCNA 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">CCNA 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-toggle="popover" title="CCNA 3" 
                data-content="This course is already in progress. Stay tuned.">CCNA 3</a>
            </li>
        </ul>
    </div>
</nav>



<div class="d-none d-xl-block bd-toc">
    <div class="container-fluid">
        <div class="row">
          <nav class="col-sm-3 col-4" id="myScrollspy">
            <ul class="nav nav-pills flex-column">
              <li class="nav-item">
                <a class="nav-link active" href="#section1">Section 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#section2">Section 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#section3">Section 3</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="#section41">Link 1</a>
                  <a class="dropdown-item" href="#section42">Link 2</a>
                </div>
              </li>
            </ul>
          </nav>
          <div class="col-sm-9 col-8">
            <div id="section1" class="bg-success">    
              <h1>Section 1</h1>
              <p>Try to scroll this section and look at the navigation list while scrolling!</p>
            </div>
            <div id="section2" class="bg-warning"> 
              <h1>Section 2</h1>
              <p>Try to scroll this section and look at the navigation list while scrolling!</p>
            </div>        
            <div id="section3" class="bg-secondary">         
              <h1>Section 3</h1>
              <p>Try to scroll this section and look at the navigation list while scrolling!</p>
            </div>
            <div id="section41" class="bg-danger">         
              <h1>Section 4-1</h1>
              <p>Try to scroll this section and look at the navigation list while scrolling!</p>
            </div>      
            <div id="section42" class="bg-info">         
              <h1>Section 4-2</h1>
              <p>Try to scroll this section and look at the navigation list while scrolling!</p>
            </div>
          </div>
        </div>
      </div>
</div>

<script>
  $(function () 
  {
      $('[data-toggle="popover"]').popover()
  })
</script>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>