So this is my last nagging formatting issue for a while I promise
I've noticed that on my primer that some of my float tags do not re-align to center when they are pushed out of floating due to page size (e.g. on mobile).
*most* of my floats do work correctly. If you look at the page on mobile for example you'll see Strengths, Weaknesses, and Philosophy correctly align center.
However, About Me, Locks, and Ephara Creatures all align left when they are auto-centered by the page sizing logic.
Ideally in my opinion these floats would autoresize to 100% and expand to fill the screen when the page resizes below where they can float in the text. But the behavior of Strengths/Weaknesses/Philosophy is more aesthetically pleasing than the left-justified boxes in my opinion.
From what I can tell from inspecting the page, the Float margins on the working box (Strengths) are autoadjusting to have left/right margins that stick it in the middle of the page, but the non-working box (About Me) is not autoadjusting its margins.
Annnd, the reason for that is I had a typo in the margins of the "About Me" box that made the margins not work at all which allows the margin resizing code to work
So after fixing all that - basically I just got rid of all the artificial margins on floats as they do not seem necessary now anyway - there is a quirk remaining. Which is that FLOAT=LEFT and FLOAT=RIGHT auto-align center in a subtly different way.
If you view the page on mobile any time you see two floats auto-aligned to center, the Left float will be just a scoche left of the right one and it breaks up the flow in a quirky way.
The reason for that appears to be that the pull-right div and pull-left divs have opposite padding elements (20px left/8px right vs. the opposite on the pull-left div) which causes the centered elements to appear shifted 12px to either side when centered.
Apologies for the novel, took me a bit to dissect all of the elements of that quirkiness.
