There must be a better way! I've been tinkering with enhanceable content tabs all afternoon and just cannot get them to work right.

Question 1:

In this post, @john_torrent was able to get the tabs on the bottom. It looks like he just moved the #fragment-# lines in the unordered list to after the div-id=fragment-# group. But when I try to do that with a page that starts like my before image, they become a stack at the bottom like my after image. I've clearly missed something! I am using buttons within the fragment-# to look a little better than the straight HTML paragraph hyperlinked text. The functionality works just fine at the top.

Question 2:

I was playing around trying to get all the buttons on a single line and changed the image size from 128px to 12%. That was the only change I made, and they would only stack vertically, not go back to horizontal. Is there some extra something I need to do to make that work?

Question 3:

I am finding that the pictures on the buttons are too much so I'm experimenting with text only buttons. These need some cleanup, but they are all exactly the same size originating image. (I made them in Canva and just did duplicate and changed the text and icon.) They are all set to 128px wide, 64px high, but they are spacing differently and three of the buttons are smaller. That's the final image, and the code to match is the last upload. What am I doing wrong here?

Thanks for your help!