scroll to bootstrap

Question

Witam

korzystając z różnych poradników na YouTube(głównie anglojęzycznych) i dokumentacji Bootstrapa udało mi się stworzyć coś takiego: https://hello-michal.github.io/first-web-project/

Zdaję sobie sprawę że jestem na początku nauki front-end'u, mój kod będzie miał wiele błędów.

Jednym z takich problemów jest scroll to, mianowicie po kliknięciu na dany odnośnik w menu, to faktycznie przenosiło mnie w miejsce na stronie gdzie on prowadził ale w taki sposób że przysłaniał on nagłówek: https://zapodaj.net/99af74de4e16e.jpg.html

próbowałem to naprawić jednak nie udało mi się, jedyne co podziałało to dodanie paddingu(klasa"pt"), jednak sam wiem że jest to niepoprawne rozwiązanie plus skutek uboczny: w rozmiarach gdzie menu jest expand(md i niżej) i jest rozwinięte to przykrywa nagłówek i trochę treści artykułu: https://zapodaj.net/299cfa0abb1ce.jpg.html  

HTML: https://github.com/hello-michal/first-web-project/blob/master/index.html

CSS: https://github.com/hello-michal/first-web-project/blob/master/main.css

Ponadto proszę o opinie o samym kodzie, czy jest przejrzysty, jak sprawa ma się z semantyką(coś mi podpowiada że też nie jest idealnie) i ogólnie o kodzie.

Proszę o konstruktywną krytykę i ewentualnie miejsca w których będę mógł uzyskać wiedzę jak powinno być zrobione to co u mnie jest źle.

Pozdrawiam