Active header in ToC is not aligned with content

Currently it does not seem headers and table of content are not aligned.

Also as seen in demo: https://www.drupal.org/files/project-images/example-tocbot.gif → when clicked on "Dog" then "Dog food" gets active

Elements should get active as we scroll past the header like in: https://tscanlin.github.io/tocbot/ is originally