[Sheet editing help needed] CSS/layout broken

So I picked up on editing sheets again, and have spent some time trying to fix the visuals of the Weaverdice sheet. So far I've had no luck in understanding why on roll20 it doesn't show all the the tables as it does on jsfiddle.

I've trimmed the code to be more bearable(and would hopefully have less faults), run css/html through several validators, added and removed ".charactersheet" class from css, triple-checked class names, compared it to other sheet's code, and looked at the wiki several times if I overlooked something, but I have nothing.  

My current code can be found https://jsfiddle.net/yhxk3onq/16/, and it's preview shows it should work.

This is how the sheet looks on Roll20:

One line in your css seems to be causing the issue
content: '/2764';

Try replacing with
content: '❤';
or maybe
content: '♥';

Vince said:

Try replacing with
content: '❤';
or maybe
content: '♥';

It worked! I replaced it with '❤'? What tools did you use to notice that line was an issue? Haven't seen anything with the online css checkers I used.

I started culling down your css.  All your column styles looked fine, but when I removed the remaining css, the top of your page suddenly styled correctly.  I knew something was up because the normal inspect element of investigation was not showing your classes as expected once loaded in roll20.  Roll20 sanitizes certain elements as well as loading it's own css which makes developing outside of roll20 difficult.  I've used text and pictos characters within content so, /2764 looked odd. ;-P  Glad you got it worked out.  Cheers

Vince said:

I started culling down your css.  

Oh, right, check a few segments at a time. I'll remember in the future.