Need some help as to why CSS is not recognising basic css codes when making my own character sheet

Right so I am trying to make a section with six skills, on the left three with input fields, and a roll button. center a picture, and on the right another three skills with input and roll buttons. When editing the code in sublime text, there seems no issue. I can use the same code on my own website and it works. but when I put the code in the roll20 editor, loads of the parameters become white, and the character sheet completely scrambles all the items in there Here's the CSS: .sheet-grid-container-main { &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template-columns: repeat(9, 1fr); &nbsp; &nbsp; grid-template-rows: repeat(5, 1fr); &nbsp; &nbsp; grid-column-gap: 0px; &nbsp; &nbsp; grid-row-gap: 0px; &nbsp; &nbsp; .sheet-grid-title { grid-area: 1 / 1 / 2 / 10; } &nbsp; &nbsp; .sheet-grid-left-title { grid-area: 2 / 1 / 3 / 4; } &nbsp; &nbsp; .sheet-grid-strength-title { grid-area: 3 / 1 / 4 / 2; } &nbsp; &nbsp; .sheet-grid-strength-value { grid-area: 3 / 2 / 4 / 3; } &nbsp; &nbsp; .sheet-grid-strength-button { grid-area: 3 / 3 / 4 / 4; } &nbsp; &nbsp; .sheet-grid-dexterity-title { grid-area: 4 / 1 / 5 / 2; } &nbsp; &nbsp; .sheet-grid-dexterity-value { grid-area: 4 / 2 / 5 / 3; } &nbsp; &nbsp; .sheet-grid-dexterity-button { grid-area: 4 / 3 / 5 / 4; } &nbsp; &nbsp; .sheet-grid-constitution-title { grid-area: 5 / 1 / 6 / 2; } &nbsp; &nbsp; .sheet-grid-constitution-value { grid-area: 5 / 2 / 6 / 3; } &nbsp; &nbsp; .sheet-grid-constitution-button { grid-area: 5 / 3 / 6 / 4; } &nbsp; &nbsp; .sheet-grid-right-title { grid-area: 2 / 7 / 3 / 10; } &nbsp; &nbsp; .sheet-grid-intelligence-title { grid-area: 3 / 7 / 4 / 8; } &nbsp; &nbsp; .sheet-grid-intelligence-value { grid-area: 3 / 8 / 4 / 9; } &nbsp; &nbsp; .sheet-grid-intelligence-button { grid-area: 3 / 9 / 4 / 10; } &nbsp; &nbsp; .sheet-grid-focus-title { grid-area: 4 / 7 / 5 / 8; } &nbsp; &nbsp; .sheet-grid-focus-value { grid-area: 4 / 8 / 5 / 9; } &nbsp; &nbsp; .sheet-grid-focus-button { grid-area: 4 / 9 / 5 / 10; } &nbsp; &nbsp; .sheet-grid-wits-title { grid-area: 5 / 7 / 6 / 8; } &nbsp; &nbsp; .sheet-grid-wits-value { grid-area: 5 / 8 / 6 / 9; } &nbsp; &nbsp; .sheet-grid-wits-button { grid-area: 5 / 9 / 6 / 10; } &nbsp; &nbsp; .sheet-grid-image { grid-area: 2 / 4 / 6 / 7; } } and here's the html I used with it: &lt;div class="grid-container-main"&gt; &nbsp; &nbsp; &lt;div class="grid-title"&gt; &lt;h3&gt;Main Stats:&lt;/h3&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-left-title"&gt; &lt;h4&gt;Physical:&lt;/h4&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-strength-title"&gt; &lt;h6&gt;Strength&lt;/h6&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-strength-value"&gt; &lt;input type="number" class="fields" id="attr_strength" name="attr_strength"&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-strength-button"&gt; &lt;button type="pool" style="font-family: dicefontd10; font-size: 30px" value=""&gt;A&lt;/button&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-dexterity-title"&gt; &lt;h6&gt;Dexterity&lt;/h6&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-dexterity-value"&gt; &lt;input type="number" class="fields" id="attr_dexterity" name="attr_dexterity"&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-dexterity-button"&gt; &lt;button type="pool" style="font-family: dicefontd10; font-size: 30px" value=""&gt;A&lt;/button&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-constitution-title"&gt; &lt;h6&gt;Constitution&lt;/h6&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-constitution-value"&gt; &lt;input type="number" class="fields" id="attr_constitution" name="attr_constitution"&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-constitution-button"&gt; &lt;button type="pool" style="font-family: dicefontd10; font-size: 30px" value=""&gt;A&lt;/button&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-right-title"&gt; &lt;h4&gt;Mental:&lt;/h4&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-intelligence-title"&gt; &lt;h6&gt;Intelligence&lt;/h6&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-intelligence-value"&gt; &lt;input type="number" id="attr_intelligence" name="attr_intelligence"&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-intelligence-button"&gt; &lt;button type="pool" style="font-family: dicefontd10; font-size: 30px" value=""&gt;A&lt;/button&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-focus-title"&gt; &lt;h6&gt;Focus&lt;/h6&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-focus-value"&gt; &lt;input type="number" id="attr_focus" name="attr_focus"&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-focus-button"&gt; &lt;button type="pool" style="font-family: dicefontd10; font-size: 30px" value=""&gt;A&lt;/button&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-wits-title"&gt; &lt;h6&gt;Wits&lt;/h6&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-wits-value"&gt; &lt;input type="number" id="attr_wits" name="attr_wits"&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-wits-button"&gt; &lt;button type="pool" style="font-family: dicefontd10; font-size: 30px" value=""&gt;A&lt;/button&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-image"&gt; &lt;img src=" <a href="https://cdn2.iconfinder.com/data/icons/roleplay-and-tabletop-dice-glyph/430/7_glyph-512.png" rel="nofollow">https://cdn2.iconfinder.com/data/icons/roleplay-and-tabletop-dice-glyph/430/7_glyph-512.png</a> " class="centerimage" style="width: 80%; height: 80%;"&gt; &lt;/div&gt; &lt;/div&gt;

Roll20 does have some hidden styles that can mess with some layouts, until you find what they are and overwrite them. Not sure if that's the case here.&nbsp; Also, does it work properly if you move the gridarea sections out of the larger class, like so: .sheet-grid-container-main { &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template-columns: repeat(9, 1fr); &nbsp; &nbsp; grid-template-rows: repeat(5, 1fr); &nbsp; &nbsp; grid-column-gap: 0px; &nbsp; &nbsp; grid-row-gap: 0px; } &nbsp; &nbsp; .sheet-grid-title { grid-area: 1 / 1 / 2 / 10; } &nbsp; &nbsp; .sheet-grid-left-title { grid-area: 2 / 1 / 3 / 4; } &nbsp; &nbsp; .sheet-grid-strength-title { grid-area: 3 / 1 / 4 / 2; } &nbsp; &nbsp; .sheet-grid-strength-value { grid-area: 3 / 2 / 4 / 3; } &nbsp; &nbsp; .sheet-grid-strength-button { grid-area: 3 / 3 / 4 / 4; } &nbsp; &nbsp; .sheet-grid-dexterity-title { grid-area: 4 / 1 / 5 / 2; } &nbsp; &nbsp; .sheet-grid-dexterity-value { grid-area: 4 / 2 / 5 / 3; } &nbsp; &nbsp; .sheet-grid-dexterity-button { grid-area: 4 / 3 / 5 / 4; } &nbsp; &nbsp; .sheet-grid-constitution-title { grid-area: 5 / 1 / 6 / 2; } &nbsp; &nbsp; .sheet-grid-constitution-value { grid-area: 5 / 2 / 6 / 3; } &nbsp; &nbsp; .sheet-grid-constitution-button { grid-area: 5 / 3 / 6 / 4; } &nbsp; &nbsp; .sheet-grid-right-title { grid-area: 2 / 7 / 3 / 10; } &nbsp; &nbsp; .sheet-grid-intelligence-title { grid-area: 3 / 7 / 4 / 8; } &nbsp; &nbsp; .sheet-grid-intelligence-value { grid-area: 3 / 8 / 4 / 9; } &nbsp; &nbsp; .sheet-grid-intelligence-button { grid-area: 3 / 9 / 4 / 10; } &nbsp; &nbsp; .sheet-grid-focus-title { grid-area: 4 / 7 / 5 / 8; } &nbsp; &nbsp; .sheet-grid-focus-value { grid-area: 4 / 8 / 5 / 9; } &nbsp; &nbsp; .sheet-grid-focus-button { grid-area: 4 / 9 / 5 / 10; } &nbsp; &nbsp; .sheet-grid-wits-title { grid-area: 5 / 7 / 6 / 8; } &nbsp; &nbsp; .sheet-grid-wits-value { grid-area: 5 / 8 / 6 / 9; } &nbsp; &nbsp; .sheet-grid-wits-button { grid-area: 5 / 9 / 6 / 10; } &nbsp; &nbsp; .sheet-grid-image { grid-area: 2 / 4 / 6 / 7; }

(Everything GiGs mentions.&nbsp; ALWAYS.), and not sure if this applies, don't rely on the preview tab when editing(this has been historically inaccurate).&nbsp; Always verify your character sheet edits/changes within a test game.&nbsp; I often use the browser's inspect element within roll20 to test adjustments before making my edits offline, locally(I use VSC), copy/paste code to the roll20 editor (html/css/translation), save, reload test game, verify... Rinse and repeat.

Vince said: (Everything GiGs mentions.&nbsp; ALWAYS.), and not sure if this applies, don't rely on the preview tab when editing(this has been historically inaccurate).&nbsp; Always verify your character sheet edits/changes within a test game.&nbsp; I often use the browser's inspect element within roll20 to test adjustments before making my edits offline, locally(I use VSC), copy/paste code to the roll20 editor (html/css/translation), save, reload test game, verify... Rinse and repeat. You epic sir! it worked!!!!

GiGs said: Also, does it work properly if you move the gridarea sections out of the larger class, like so: This was going to be my input. The character sheet editor doesn't support SCSS or any other improved CSS language.

Well, it worked untill I reached this part: &lt;div class="grid-equipment"&gt; &lt;div class="grid-equipment-title" style="text-align: center;"&gt;&lt;h3&gt;Equipment&lt;/h3&gt;&lt;/div&gt; &lt;div class="grid-weapon-title"&gt;&lt;h4&gt;Weapons&lt;/h4&gt;&lt;/div&gt; &lt;div class="grid-armour-title"&gt;&lt;h4&gt;Armour&lt;/h4&gt;&lt;/div&gt; &lt;div class="grid-tools-title"&gt;&lt;h4&gt;Tools&lt;/h4&gt;&lt;/div&gt; &lt;div class="grid-mainHand-title"&gt;&lt;h5&gt;Main Hand&lt;/h5&gt;&lt;/div&gt; &lt;div class="grid-mainHand-name"&gt;&lt;input type="text" name="attr_mainHand_name" /&gt;&lt;/div&gt; &lt;div class="grid-mainHand-bonus"&gt;&lt;input type="number" name="attr_mainHand_bonus" /&gt;&lt;/div&gt; &lt;div class="grid-offHand-title"&gt;&lt;h5&gt;Off Hand&lt;/h5&gt;&lt;/div&gt; &lt;div class="grid-offHand-name"&gt;&lt;input type="text" name="attr_offHand_name" /&gt;&lt;/div&gt; &lt;div class="grid-offHand-bonus"&gt;&lt;input type="number" name="attr_offHand_bonus" /&gt;&lt;/div&gt; &lt;div class="grid-shield-title"&gt;&lt;h5&gt;shield&lt;/h5&gt;&lt;/div&gt; &lt;div class="grid-shield-name"&gt;&lt;input type="text" name="attr_shield_name" /&gt;&lt;/div&gt; &lt;div class="grid-shield-bonus"&gt;&lt;input type="number" name="attr_shield_bonus" /&gt;&lt;/div&gt; &lt;div class="grid-amulet-title"&gt;&lt;h5&gt;amulet&lt;/h5&gt;&lt;/div&gt; &lt;div class="grid-amulet-name"&gt;&lt;input type="text" name="attr_amulet_name" /&gt;&lt;/div&gt; &lt;div class="grid-amulet-bonus"&gt;&lt;input type="number" name="attr_amulet_bonus" /&gt;&lt;/div&gt; &lt;div class="grid-ring1-title"&gt;&lt;h5&gt;ring 1&lt;/h5&gt;&lt;/div&gt; &lt;div class="grid-ring1-name"&gt;&lt;input type="text" name="attr_ring1_name" /&gt;&lt;/div&gt; &lt;div class="grid-ring1-bonus"&gt;&lt;input type="number" name="attr_ring1_bonus" /&gt;&lt;/div&gt; &lt;div class="grid-ring2-title"&gt;&lt;h5&gt;ring 2&lt;/h5&gt;&lt;/div&gt; &lt;div class="grid-ring2-name"&gt;&lt;input type="text" name="attr_ring2_name" /&gt;&lt;/div&gt; &lt;div class="grid-ring2-bonus"&gt;&lt;input type="number" name="attr_ring2_bonus" /&gt;&lt;/div&gt; &lt;div class="grid-helm-title"&gt;&lt;h5&gt;helm&lt;/h5&gt;&lt;/div&gt; &lt;div class="grid-helm-name"&gt;&lt;input type="text" name="attr_helm_name" /&gt;&lt;/div&gt; &lt;div class="grid-helm-bonus"&gt;&lt;input type="number" name="attr_helm_bonus" /&gt;&lt;/div&gt; &lt;div class="grid-chest-title"&gt;&lt;h5&gt;chest&lt;/h5&gt;&lt;/div&gt; &lt;div class="grid-chest-name"&gt;&lt;input type="text" name="attr_chest_name" /&gt;&lt;/div&gt; &lt;div class="grid-chest-bonus"&gt;&lt;input type="number" name="attr_chest_bonus" /&gt;&lt;/div&gt; &lt;div class="grid-gloves-title"&gt;&lt;h5&gt;gloves&lt;/h5&gt;&lt;/div&gt; &lt;div class="grid-gloves-name"&gt;&lt;input type="text" name="attr_gloves_name" /&gt;&lt;/div&gt; &lt;div class="grid-gloves-bonus"&gt;&lt;input type="number" name="attr_gloves_bonus" /&gt;&lt;/div&gt; &lt;div class="grid-arms-title"&gt;&lt;h5&gt;arms&lt;/h5&gt;&lt;/div&gt; &lt;div class="grid-arms-name"&gt;&lt;input type="text" name="attr_arms_name" /&gt;&lt;/div&gt; &lt;div class="grid-arms-bonus"&gt;&lt;input type="number" name="attr_arms_bonus" /&gt;&lt;/div&gt; &lt;div class="grid-legs-title"&gt;&lt;h5&gt;legs&lt;/h5&gt;&lt;/div&gt; &lt;div class="grid-legs-name"&gt;&lt;input type="text" name="attr_legs_name" /&gt;&lt;/div&gt; &lt;div class="grid-legs-bonus"&gt;&lt;input type="number" name="attr_legs_bonus" /&gt;&lt;/div&gt; &lt;div class="grid-boots-title"&gt;&lt;h5&gt;boots&lt;/h5&gt;&lt;/div&gt; &lt;div class="grid-boots-name"&gt;&lt;input type="text" name="attr_boots_name" /&gt;&lt;/div&gt; &lt;div class="grid-boots-bonus"&gt;&lt;input type="number" name="attr_boots_bonus" /&gt;&lt;/div&gt; &lt;div class="grid-tools-field"&gt;&lt;textarea&gt;&lt;/textarea&gt;&lt;/div&gt; &lt;/div&gt; This part for some reason (in comparison to the original post) does everything underneath one another, while the css and the html have the same kind of layout (except for the &lt;input type="text"&gt; area here's the css .sheet-grid-equipement { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(8, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; } .sheet-grid-equipment-title { grid-area: 1 / 1 / 2 / 10; } .sheet-grid-weapon-title { grid-area: 2 / 1 / 3 / 4; } .sheet-grid-armour-title { grid-area: 2 / 4 / 3 / 7; } .sheet-grid-tools-title { grid-area: 2 / 7 / 3 / 10; } .sheet-grid-mainHand-title { grid-area: 3 / 1 / 4 / 2; } .sheet-grid-mainHand-name { grid-area: 3 / 2 / 4 / 3; } .sheet-grid-mainHand-bonus { grid-area: 3 / 3 / 4 / 4; } .sheet-grid-offHand-title { grid-area: 4 / 1 / 5 / 2; } .sheet-grid-offHand-name { grid-area: 4 / 2 / 5 / 3; } .sheet-grid-offHand-bonus { grid-area: 4 / 3 / 5 / 4; } .sheet-grid-shield-title { grid-area: 5 / 1 / 6 / 2; } .sheet-grid-shield-name { grid-area: 5 / 2 / 6 / 3; } .sheet-grid-shield-bonus { grid-area: 5 / 3 / 6 / 4; } .sheet-grid-amulet-title { grid-area: 6 / 1 / 7 / 2; } .sheet-grid-amulet-name { grid-area: 6 / 2 / 7 / 3; } .sheet-grid-amulet-bonus { grid-area: 6 / 3 / 7 / 4; } .sheet-grid-ring1-title { grid-area: 7 / 1 / 8 / 2; } .sheet-grid-ring1-name { grid-area: 7 / 2 / 8 / 3; } .sheet-grid-ring1-bonus { grid-area: 7 / 3 / 8 / 4; } .sheet-grid-ring2-title { grid-area: 8 / 1 / 9 / 2; } .sheet-grid-ring2-name { grid-area: 8 / 2 / 9 / 3; } .sheet-grid-ring2-bonus { grid-area: 8 / 3 / 9 / 4; } .sheet-grid-helm-title { grid-area: 3 / 4 / 4 / 5; } .sheet-grid-helm-name { grid-area: 3 / 5 / 4 / 6; } .sheet-grid-helm-bonus { grid-area: 3 / 6 / 4 / 7; } .sheet-grid-chest-title { grid-area: 4 / 4 / 5 / 5; } .sheet-grid-chest-name { grid-area: 4 / 5 / 5 / 6; } .sheet-grid-chest-bonus { grid-area: 4 / 6 / 5 / 7; } .sheet-grid-gloves-title { grid-area: 5 / 4 / 6 / 5; } .sheet-grid-gloves-name { grid-area: 5 / 5 / 6 / 6; } .sheet-grid-gloves-bonus { grid-area: 5 / 6 / 6 / 7; } .sheet-grid-arms-title { grid-area: 6 / 4 / 7 / 5; } .sheet-grid-arms-name { grid-area: 6 / 5 / 7 / 6; } .sheet-grid-arms-bonus { grid-area: 6 / 6 / 7 / 7; } .sheet-grid-legs-title { grid-area: 7 / 4 / 8 / 5; } .sheet-grid-legs-name { grid-area: 7 / 5 / 8 / 6; } .sheet-grid-legs-bonus { grid-area: 7 / 6 / 8 / 7; } .sheet-grid-boots-title { grid-area: 8 / 4 / 9 / 5; } .sheet-grid-boots-name { grid-area: 8 / 5 / 9 / 6; } .sheet-grid-boots-bonus { grid-area: 8 / 6 / 9 / 7; } .sheet-grid-tools-field { grid-area: 3 / 7 / 9 / 10; }

you have a typo in your CSS...the first line should be: .sheet-grid- equipment {

LOL oke thanks XD

No worries...something else you may run into, I'm not seeing any styles for the text input width, this may or may not give you some weird formatting. &nbsp;If the text fields appear too long, you'll just need to declare width for the text input fields.

I actually tried declaring width for text input fields, and it did not change anything. so I managed with grids for life! XD

The beauty (and also frustration) of grids is that unless you change the justify-items/align-items properties of the container, or the self versions of the specific item, elements are stretched to fill the grid area they are assigned to. The reason this is also a frustration is the occasional instance of it not working this way.

I've worked that out yes. but so far the sheet looks beautifull. the rolls and auto-calculations are not working. so I am trying&nbsp; to figure that one out now XD