Thank you, i'm very happy to be here.
I have the cdn's in the local but forgot to put them in the codepen - I will add them now and see how we go.
Here is the edited Codepen link:
Still can't replicate the entire scroll but basically, when you go from top to section1, then horizontal to section2, it works perfectly okay. But, when I click the #by-laws (li link) it scrolls to section2 (as it should) but the -33.3333% starts at #main which is the start of section1 - so what happens is we get the -33.3333% also on section 2, which shows the 100vh (color: red) but also another 100vh white page.
I can't figure out in js how to get section2 on li click to start at x: 0.
Any help is greatly appreciated, and yes I am still learning JS, so go easy