Hello, Any chance someone can explain to me, like I'm 5, why these two columns are on top of each other instead of side by side??? Here's the CSS /* START OF CHARACTER EDIT PAGE */ .charsheet .sheet-edit-character-grid-section { display: grid; grid-gap: 5px; column-gap: 5px; grid-template-columns: 400px 400px ; grid-template-rows: auto; grid-template-areas: "edit-character-header edit-character-header" "edit-health edit-defense" "edit-core-stats edit-core-stats" } .charsheet div.sheet-edit-character-header { grid-area: edit-character-header; grid-template-columns: 133.33px 133.33px 133.33px 133.33px 133.33px 133.33px; grid-template-rows: 1; text-align: center; } .charsheet div.sheet-edit-character-health { grid-area: edit-health; display: content; grid-template-columns: 60px 60px 60px 60px 60px 60px; text-align: left; color:#278bce; } .charsheet div.sheet-edit-character-defense { grid-area: edit-defense; grid-template-columns: 60px 60px 60px 60px 60px 60px; text-align: left; color:#278bce; } .charsheet div.sheet-edit-core-stats { grid-area: edit-core-stats; grid-template-columns: 75px 52px 52px 52px 52px 52px 52px 52px 100px 52px 52px 52px 52px 52px; grid-template-rows: 25px; grid-auto-rows: 25px; grid-gap: 2px; column-gap: auto; } .charsheet div.sheet-edit-core-stats h4 { color:#278bce; margin: auto; text-align: center; } .charsheet div.sheet-edit-core-stats b { color:#278bce; margin: auto; text-align: center; } .charsheet div.edit-sheet h3 { grid-column: 1 / -1; text-align: center; grid-row: 1; } /* END OF CHARACTER EDIT PAGE */ HTML <!-- START OF EDIT SHEET --> < div class =" sheet-edit-character-header sheet-edit-character-grid-section "> < b class =" sheet-subheading " style =" grid-column: 2; "> Health </ b > < b class =" sheet-subheading " style =" grid-column: 5; "> Defense </ b > </ div > <div class="sheet-edit-character-health sheet-edit-character-grid-section"> <span style="text-align: left;"> Name </span> <span style="text-align: left;"> Health </span> <span style="text-align: left;"> Cyb </span> <span style="text-align: left;"> Gen </span> <span style="text-align: left;"> Art </span> <span style="text-align: left;"> Misc </span> <span title="Sum of attributes + Various HP buffs and additional armors, etc." style="padding-top:5px;"> Health </span> <span class="sheet-green-color" title="(STR*CON) + additionals ( Cyb + Gen + Art + Misc bonuses)" name="attr_nat_health" value="attr_nat_health" style="font-size: large; text-align: center" /> <input class="sheet-red-color" name="attr_nat_health" value="attr_nat_health" hidden /> <!-- <input class="sheet-inputfield-health" name="attr_nat_health" type="number" value="attr_nat_health" disabled /> --> <input class="sheet-inputfield-health" name="attr_cyb_misc_health" type="number" value="attr_cyb_misc_health" /> <input class="sheet-inputfield-health" name="attr_gen_misc_health" type="number" value="attr_gen_misc_health" /> <input class="sheet-inputfield-health" name="attr_art_misc_health" type="number" value="attr_art_misc_health" /> <input class="sheet-inputfield-health" name="attr_misc_health" type="number" value="attr_misc_health" /> <span style="padding-top:5px;"> P+ </span> <span class="sheet-green-color" title="This is your natural P+ (not including armor/shields)" name="attr_nat_pen_plus" value="attr_nat_pen_plus" style="font-size: large; text-align: center" /> <input name="attr_nat_pen_plus" value="attr_nat_pen_plus" hidden /> <input class="sheet-inputfield-health" name="attr_cyb_misc_pen_plus" type="number" value="attr_cyb_misc_pen_plus" /> <input class="sheet-inputfield-health" name="attr_gen_misc_pen_plus" type="number" value="attr_gen_misc_pen_plus" /> <input class="sheet-inputfield-health" name="attr_art_misc_pen_plus" type="number" value="attr_art_misc_pen_plus" /> <input class="sheet-inputfield-health" name="attr_misc_pen_plus" type="number" value="attr_misc_pen_plus" /> <span style="padding-top:5px;"> Dmg Red </span> <span class="sheet-green-color" title="This is your natural Damage Reduction (not including armor/shields)" name="attr_nat_dmg_red" style="font-size: large; text-align: center" /> <input name="attr_nat_dmg_red" value="attr_nat_dmg_red" hidden /> <input class="sheet-inputfield-health" name="attr_cyb_misc_dmg_red" type="number" value="attr_cyb_misc_dmg_red" /> <input class="sheet-inputfield-health" name="attr_gen_misc_dmg_red" type="number" value="attr_gen_misc_dmg_red" /> <input class="sheet-inputfield-health" name="attr_art_misc_dmg_red" type="number" value="attr_art_misc_dmg_red" /> <input class="sheet-inputfield-health" name="attr_misc_dmg_red" type="number" value="attr_misc_dmg_red" /> <span style="padding-top:5px;"> Regen </span> <span class="sheet-green-color" title="This is your natural Damage Reduction (not including armor/shields)" name="attr_nat_regen" style="font-size: large; text-align: center;" /> <input name="attr_nat_regen" value="attr_nat_regen" hidden /> <input class="sheet-inputfield-health" name="attr_cyb_misc_regen" type="number" value="attr_cyb_misc_regen" /> <input class="sheet-inputfield-health" name="attr_gen_misc_regen" type="number" value="attr_gen_misc_regen" /> <input class="sheet-inputfield-health" name="attr_art_misc_regen" type="number" value="attr_art_misc_regen" /> <input class="sheet-inputfield-health" name="attr_misc_regen" type="number" value="attr_misc_regen" /> </div> <div class="sheet-block sheet-edit-character-defense sheet-edit-character-grid-section"> <span style="text-align: left;"> Name </span> <span style="text-align: left;"> Health </span> <span style="text-align: left;"> Cyb </span> <span style="text-align: left;"> Gen </span> <span style="text-align: left;"> Art </span> <span style="text-align: left;"> Misc </span> <span title="Sum of attributes + Various HP buffs and additional armors, etc." style="padding-top:5px;"> Health </span> <span class="sheet-green-color" title="(STR*CON) + additionals ( Cyb + Gen + Art + Misc bonuses)" name="attr_nat_health" value="attr_nat_health" style="font-size: large; text-align: center" /> <input class="sheet-red-color" name="attr_nat_health" value="attr_nat_health" hidden /> <!-- <input class="sheet-inputfield-health" name="attr_nat_health" type="number" value="attr_nat_health" disabled /> --> <input class="sheet-inputfield-health" name="attr_cyb_misc_health" type="number" value="attr_cyb_misc_health" /> <input class="sheet-inputfield-health" name="attr_gen_misc_health" type="number" value="attr_gen_misc_health" /> <input class="sheet-inputfield-health" name="attr_art_misc_health" type="number" value="attr_art_misc_health" /> <input class="sheet-inputfield-health" name="attr_misc_health" type="number" value="attr_misc_health" /> <span style="padding-top:5px;"> P+ </span> <span class="sheet-green-color" title="This is your natural P+ (not including armor/shields)" name="attr_nat_pen_plus" value="attr_nat_pen_plus" style="font-size: large; text-align: center" /> <input name="attr_nat_pen_plus" value="attr_nat_pen_plus" hidden /> <input class="sheet-inputfield-health" name="attr_cyb_misc_pen_plus" type="number" value="attr_cyb_misc_pen_plus" /> <input class="sheet-inputfield-health" name="attr_gen_misc_pen_plus" type="number" value="attr_gen_misc_pen_plus" /> <input class="sheet-inputfield-health" name="attr_art_misc_pen_plus" type="number" value="attr_art_misc_pen_plus" /> <input class="sheet-inputfield-health" name="attr_misc_pen_plus" type="number" value="attr_misc_pen_plus" /> <span style="padding-top:5px;"> Dmg Red </span> <span class="sheet-green-color" title="This is your natural Damage Reduction (not including armor/shields)" name="attr_nat_dmg_red" style="font-size: large; text-align: center" /> <input name="attr_nat_dmg_red" value="attr_nat_dmg_red" hidden /> <input class="sheet-inputfield-health" name="attr_cyb_misc_dmg_red" type="number" value="attr_cyb_misc_dmg_red" /> <input class="sheet-inputfield-health" name="attr_gen_misc_dmg_red" type="number" value="attr_gen_misc_dmg_red" /> <input class="sheet-inputfield-health" name="attr_art_misc_dmg_red" type="number" value="attr_art_misc_dmg_red" /> <input class="sheet-inputfield-health" name="attr_misc_dmg_red" type="number" value="attr_misc_dmg_red" /> <span style="padding-top:5px;"> Regen </span> <span class="sheet-green-color" title="This is your natural Damage Reduction (not including armor/shields)" name="attr_nat_regen" style="font-size: large; text-align: center;" /> <input name="attr_nat_regen" value="attr_nat_regen" hidden /> <input class="sheet-inputfield-health" name="attr_cyb_misc_regen" type="number" value="attr_cyb_misc_regen" /> <input class="sheet-inputfield-health" name="attr_gen_misc_regen" type="number" value="attr_gen_misc_regen" /> <input class="sheet-inputfield-health" name="attr_art_misc_regen" type="number" value="attr_art_misc_regen" /> <input class="sheet-inputfield-health" name="attr_misc_regen" type="number" value="attr_misc_regen" /> </div> <div class="sheet-edit-character-grid-section sheet-edit-core-stats sheet-block"> <span class="sheet-subheading sheet-center">Race</span></td> <select class="sheet-dropdown" type="text" name="attr_race"> <option disabled hidden selected></option> <option style="color:white;background:#000000;">Human</option> <option style="color:white;background:#000000;">Sollox</option> <option style="color:white;background:#000000;">Talaxian</option> <option style="color:white;background:#000000;">Thorn</option> <option style="color:white;background:#000000;">Custom</option> </select> <span disabled></span> <span disabled></span> <span disabled></span> <span disabled></span> <span disabled></span> <span disabled></span> <span disabled></span> <span disabled></span> <span disabled></span> <span disabled></span> <span disabled></span> <span disabled></span> <h4>Attribute</h4> <h4>Score</h4> <h4>Cyb.</h4> <h4>Gen.</h4> <h4>Art.</h4> <h4>Misc.</h4> <h4>Temp</h4> <h4>Points</h4> <h4>Progression</h4> <h4>Level</h4> <h4>Psi BD</h4> <h4>Psi TK</h4> <h4>Psi CA</h4> <h4>Quirk</h4> <b>Strength</b> <span class="sheet-red-color sheet-center" title="Strength Score" name="attr_strength" type="number" value="attr_strength"></span> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_strength_cyb" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_strength_gen" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_strength_art" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_strength_misc" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_strength_temp" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_strength_points" value="0" style="width: 3.5em; text-align: center"> <select class="sheet-dropdown sheet-blue-color sheet-inputfield" type="text" name="attr_strength_progression"> <option style="color:#278bce;background:#000000;" selected>1,2,3...</option> <option style="color:#278bce;background:#000000;">4,5,6,7</option> <option style="color:#278bce;background:#000000;">3,4,5,6</option> <option style="color:#278bce;background:#000000;">2,3,4,5</option> <option style="color:#278bce;background:#000000;">1,2,3,4</option> <option style="color:#278bce;background:#000000;">3,3,3,3</option> <option style="color:#278bce;background:#000000;">5,5,5,5</option> </select> <span class="sheet-red-color sheet-center" title="This should equal the level of Attribute minus the bonuses, just the points."> To Do </span> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_body_discipline_str" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_telekinesis_str_aug" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_cause" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_quirk_strength_bonus" value="0" style="width: 3.5em; text-align: center"> <b >Dexterity</b> <span class="sheet-red-color sheet-center" name="attr_dexterity" value="attr_dexterity"></span> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_dexterity_cyb" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_dexterity_gen" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_dexterity_art" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_dexterity_misc" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_dexterity_temp" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_dexterity_points" value="0" style="width: 3.5em; text-align: center"> <select class="sheet-dropdown sheet-blue-color sheet-inputfield" type="text" name="attr_dexterity_progression"> <option style="color:#278bce;background:#000000;" selected>1,2,3...</option> <option style="color:#278bce;background:#000000;">4,5,6,7</option> <option style="color:#278bce;background:#000000;">3,4,5,6</option> <option style="color:#278bce;background:#000000;">2,3,4,5</option> <option style="color:#278bce;background:#000000;">1,2,3,4</option> <option style="color:#278bce;background:#000000;">3,3,3,3</option> <option style="color:#278bce;background:#000000;">5,5,5,5</option> </select> <span class="sheet-red-color sheet-center" title="This should equal the level of Attribute minus the bonuses, just the points."> To Do </span> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_body_discipline_dex" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_telekinesis_dex_aug" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_cause" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_quirk_dexterity_bonus" value="0" style="width: 3.5em; text-align: center"> <b >Constitution</b> <span class="sheet-red-color sheet-center" name="attr_constitution" value="attr_constitution"></span> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_constitution_cyb" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_constitution_gen" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_constitution_art" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_constitution_misc" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_constitution_temp" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_constitution_points" value="0" style="width: 3.5em; text-align: center"> <select class="sheet-dropdown sheet-blue-color sheet-inputfield" type="text" name="attr_constitution_progression"> <option style="color:#278bce;background:#000000;" selected>1,2,3...</option> <option style="color:#278bce;background:#000000;">4,5,6,7</option> <option style="color:#278bce;background:#000000;">3,4,5,6</option> <option style="color:#278bce;background:#000000;">2,3,4,5</option> <option style="color:#278bce;background:#000000;">1,2,3,4</option> <option style="color:#278bce;background:#000000;">3,3,3,3</option> <option style="color:#278bce;background:#000000;">5,5,5,5</option> </select> <span class="sheet-red-color sheet-center" title="This should equal the level of Attribute minus the bonuses, just the points."> To Do </span> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_body_discipline_con" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_telekinesis_con_aug" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_cause" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_quirk_constitution_bonus" value="0" style="width: 3.5em; text-align: center"> <b >Intelligence</b> <span class="sheet-red-color sheet-center" name="attr_intelligence" value="attr_intelligence"></span> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_intelligence_cyb" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_intelligence_gen" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_intelligence_art" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_intelligence_misc" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_intelligence_temp" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_intelligence_points" value="0" style="width: 3.5em; text-align: center"> <select class="sheet-dropdown sheet-blue-color sheet-inputfield" type="text" name="attr_intelligence_progression"> <option style="color:#278bce;background:#000000;" selected>1,2,3...</option> <option style="color:#278bce;background:#000000;">4,5,6,7</option> <option style="color:#278bce;background:#000000;">3,4,5,6</option> <option style="color:#278bce;background:#000000;">2,3,4,5</option> <option style="color:#278bce;background:#000000;">1,2,3,4</option> <option style="color:#278bce;background:#000000;">3,3,3,3</option> <option style="color:#278bce;background:#000000;">5,5,5,5</option> </select> <span class="sheet-red-color sheet-center" title="This should equal the level of Attribute minus the bonuses, just the points."> To Do </span> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_body_discipline_int" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_telekinesis_int_aug" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_cause" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_quirk_intelligence_bonus" value="0" style="width: 3.5em; text-align: center"> <b >Wisdom</b> <span class="sheet-red-color sheet-center" name="attr_wisdom" value="attr_wisdom"></span> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_wisdom_cyb" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_wisdom_gen" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_wisdom_art" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_wisdom_misc" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_wisdom_temp" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_wisdom_points" value="0" style="width: 3.5em; text-align: center"> <select class="sheet-dropdown sheet-blue-color sheet-inputfield" type="text" name="attr_wisdom_progression"> <option style="color:#278bce;background:#000000;" selected>1,2,3...</option> <option style="color:#278bce;background:#000000;">4,5,6,7</option> <option style="color:#278bce;background:#000000;">3,4,5,6</option> <option style="color:#278bce;background:#000000;">2,3,4,5</option> <option style="color:#278bce;background:#000000;">1,2,3,4</option> <option style="color:#278bce;background:#000000;">3,3,3,3</option> <option style="color:#278bce;background:#000000;">5,5,5,5</option> </select> <span class="sheet-red-color sheet-center" title="This should equal the level of Attribute minus the bonuses, just the points."> To Do </span> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_body_discipline_wis" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_telekinesis_wis_aug" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_cause" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_quirk_wisdom_bonus" value="0" style="width: 3.5em; text-align: center"> <b >Charisma</b> <span class="sheet-red-color sheet-center" name="attr_charisma" value="attr_charisma"></span> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_charisma_cyb" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_charisma_gen" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_charisma_art" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_charisma_misc" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_charisma_temp" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_charisma_points" value="0" style="width: 3.5em; text-align: center"> <select class="sheet-dropdown sheet-blue-color sheet-inputfield" type="text" name="attr_charisma_progression"> <option style="color:#278bce;background:#000000;" selected>1,2,3...</option> <option style="color:#278bce;background:#000000;">4,5,6,7</option> <option style="color:#278bce;background:#000000;">3,4,5,6</option> <option style="color:#278bce;background:#000000;">2,3,4,5</option> <option style="color:#278bce;background:#000000;">1,2,3,4</option> <option style="color:#278bce;background:#000000;">3,3,3,3</option> <option style="color:#278bce;background:#000000;">5,5,5,5</option> </select> <span class="sheet-red-color sheet-center" title="This should equal the level of Attribute minus the bonuses, just the points."> To Do </span> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_body_discipline_cha" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_telekinesis_cha_aug" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_psi_cause" value="0" style="width: 3.5em; text-align: center"> <input class="sheet-inputfield sheet-blue-color" type="number" name="attr_quirk_charisma_bonus" value="0" style="width: 3.5em; text-align: center"> </div>
</div>
