Не удалось исправить левую боковую панель

Это потому, что fix "игнорируется" другими контейнерами. Это handeld, как если бы это было абсолютным. Вы можете задать боковой панели фиксированную ширину, а основной — отступ.

#sideNav {
  background-color: #012d20;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right-style: groove;
  height: 100vh;
  width: 350px;
}

main {
  padding-left: 350px;
}

Кодепен

Причина, по которой это не работает для вас, заключается в том, что строка имеет тип отображения flex, поэтому все столбцы ниже вписываются в эту строку.

Затем ваши столбцы представляют собой блоки, разделенные заданным значением, например. столбец-3 столбец-4 и т. д.

Изменяя тип отображения столбца (на фиксированный в вашем примере), вы удаляете его из гибкого интервала, и поэтому ваша основная навигация будет двигаться влево, потому что вы не сместили ее.

Чтобы исправить это, не добавляйте отступы, как предлагали другие, в BootStrap есть классы, которые обрабатывают это. Вместо этого добавьте смещение-2 к основной навигации и оставьте все остальное как есть.

Пример фрагмента

#sideNav {
  background-color: #012d20;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right-style: groove;
  height: 100vh;
}

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">

<div class = "row">
  <!-- navigation sidebar -->
  <div class = "col-2 pt-5" id = "sideNav">
    ...
  </div>

  <!-- main content area -->
  <main class = "col-10 offset-2">
    ...
  </main>
</div>

Давайте попробуем это,

Я добавляю ширину для sideNav около 40 пикселей; тот же самый padding-left я добавляю #main-content.

HTML

          <div class = "row">
            <!-- navigation sidebar -->
            <div class = "col-2 pt-5" id = "sideNav">
            <p>paragraph...</p>
           </div>
           <!-- main content area -->
           <main class = "col-10" id = "main-content">
             <p>paragraph...</p>
             <p>paragraph...</p>
           </main>
           </div>

css

        #sideNav {
            background-color: #012d20;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            overflow: hidden;
            border-right-style: groove;
            height: 100%;
            width:40px;
         }

         #main-content{
          width:100%;
          float:left;
          padding:0 0 0 40px;
          background:yellow;
         }

Я видел, что вы используете загрузочную сетку, поэтому, чтобы сетка работала, я рекомендую поместить фиксированный контейнер в .col-2 div.

 #sideNav {
      background-color: #012d20;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      overflow: hidden;
      border-right-style: groove;
      height: 100vh;
    }

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet"/>

    <div class = "row">
      <!-- navigation sidebar -->
      <div class = "col-2 pt-5">
        <div id = "sideNav">
          ...
        </div>
      </div>

      <!-- main content area -->
      <main class = "col-10">
        ...
      </main>
    </div>