Roll20 overwrites my CSS?

I am trying to create my first sheet from scratch and I created the below header for it: However, when I import it to Roll20 it looks like this: Looking into the code, I realized what squished the divs, they are being overwritten by other CSS, for example:   At the end of all the styling, all the sum of those tiny margins move my divs around and they are no longer in the correct place. Is there any way to stop those default values from being injected? If not, what would be the best way to workaround this problem?

Hi Moichu, might re-try posting your images (note: I find the most consistent option to insert forum images is to screen shot to your computer locally and use the browse option when you insert the image in your post.) It's also a good practice and often necessary, to post code examples or link to the full code(gist, pastebin, etc.) to help other's find a solution. Are you using classes in your html/css?  Try prepending your css rules with ".charsheet" to help override roll20's rules.  .charsheet .wrapper section div {...} It's often just a matter of increasing your css specificity to ensure your get the styling you want.

Thanks a lot for the help and sorry for the missing screenshots. So, my code looks like this on chrome: But when I move it to roll20, I get this result: I use divs and classes (yet, I may be wrong as honestly never worked on a "real" html/css project before. I uploaded my code to Github here . (On Github, the html is full with head, body; however, when I move it to roll20 I delete all of that and only use the divs from inside the body, in case that matters) As mention, this is my first time, can you help me understand what you mean by prepending your css rules with ".charsheet"?

Thanks for updating. It's going to be problematic to develop outside of roll20 because it has certain restrictions related to the vtt's sandbox and as you've experienced, the styling of the sheet can be effected as well.  I would suggest editing locally (vscode, notepad++, etc.), linked to a sandbox game, and using the chrome extension Roll20 API and Sheet Auto-updater to see your edits in real-time.  Very handy process. Another suggestion is to setup your sheet using a css-grid and/or flex-box .  You will have infinitely more control and flexibility over your layout. Just to help get closer to what you want without re-creating using grid/flex (very highly suggested); try adding display: inline to your label class and add width: auto to your inputs (note how I prepended the class name with .charsheet to increase the specificity to override roll20's base css) .charsheet .leftLabel { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; margin-right: 3px; color: white; display: inline; } .charsheet input[type="text"], .charsheet input[type="number"], .charsheet select { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; width: auto; }

Oh, I was skipping flex cos I didn't know how to update in real time in roll20 and flex just didn't behave the same way as in  browser. I'll look into that extension to directly work on roll20. As for the example code, thanks a lot! Now I understand a lil better what I should be trying to recreate.

Read everything from GiGs site Cybersphere to become a Grandmaster sheet creator/editor.  Cannot recommend the site enough.  Goodluck.