VS Code build CSS Grid Character Sheet Not Working Right In Preview or Sandbox

I am building my first custom character sheet. I am using VScode. When I run it on my machine everything is looking ok: But when I go to see how it would look in the Sandbox.... On the games Custom Character Sheet Html/Css/Preview it doesn't look too bad at all: Here is a link to my HTML and CSS. I'm very new to HTML and CSS but have other programing experience, so I'm sure there something I am missing. Any help would be appreciated. Pen IO Link

Two things here: you should never prototype sheets outside of Roll20, and should never trust the Preview window. The only ways to test a Roll20 sheet are a) fully load a game, don't use the preview, or b) use the sandbox. It's almost as fast as using codepen. Create your code in separate *.html and *.css files (which if you are using VS Code you're probably doing already), and create a game in the custom sheet sandbox, and load them in there. You can then inspect the browser (rightlick on anything on the sheet and click Inspect Element), and make temporary changes the the CSS to see what you need to add to your files. PS: I'm pretty sure underlining like this isnt supported on Roll20: <u> Exp</u> You need to give the class an underlining CSS property. (like text-decoration:underline)