
Hello, I have a custom page that I am making. I am using grid, and have it in 3 "boxes". I have in the first "column" the attributes and Roll Buttons. But they are stacked when the button and attribute should be horizontal. I'm losing my mind. Here's the code. HTML < input type =" hidden " class =" sheet-tabstoggle " name =" attr_sheetTab " value =" character " /> < div > < button type =" action " name =" act_character " > Character </ button > < button type =" action " name =" act_sheet-equipped " > Equipped </ button > < button type =" action " name =" act_inventory " > Inventory </ button > < button type =" action " name =" act_edit-sheet " > Edit Sheet </ button > </ div > < div class =" sheet-character "></ div > < input type =" text " name =" @{character_name} " value =" Character Name "> < div class =" sheet-grid-section "> < div class =" sheet-core-stats sheet-block "> < h3 > Core Stats </ h3 > < h3 disabled ></ h3 > < span > STR </ span > < button class =" sheet-button-roll " type =" roll " value =" &{template:default} {{name=@{character_name} rolls Strength}} {{roll=[[1d20+@{strength}]]}} "/> < span > DEX </ span > < button class =" sheet-button-roll " type =" roll " value =" &{template:default} {{name=@{character_name} rolls Dexterity}} {{roll=[[1d20+@{dexterity}]]}} " /> < span > CON </ span > < button class =" sheet-button-roll " type =" roll " value =" &{template:default} {{name=@{character_name} rolls Strength}} {{roll=[[1d20+@{constitution}]]}} "/> < span > INT </ span > < button class =" sheet-button-roll " type =" roll " value =" &{template:default} {{name=@{character_name} rolls Intelligence}} {{roll=[[1d20+@{intelligence}]]}} "/> < span > WIS </ span > < button class =" sheet-button-roll " type =" roll " value =" &{template:default} {{name=@{character_name} rolls Wisdom}} {{roll=[[1d20+@{wisdom}]]}} "/> < span > CHA </ span > < button class =" sheet-button-roll " type =" roll " value =" &{template:default} {{name=@{character_name} rolls Charisma}} {{roll=[[1d20+@{charisma}]]}} "/> </ div > </ div > </ div > CSS /*Configure the tab buttons*/ . charsheet . sheet-character , . charsheet . sheet-equipped , . charsheet . sheet-inventory , . charsheet . edit-sheet { display : none ; } /* show the selected tab */ . charsheet . sheet-tabstoggle [ value = " character " ] ~ div . sheet-character , . charsheet . sheet-tabstoggle [ value = " sheet-equipped " ] ~ div . sheet-equipped , . charsheet . sheet-tabstoggle [ value = " inventory " ] ~ div . sheet-inventory , . charsheet . sheet-tabstoggle [ value = " edit-sheet " ] ~ div . edit-sheet { display : block ; } . charsheet div . sheet-block { display : grid ; padding : 5px ; border : 3px solid black ; } . charsheet . sheet-grid-section { display : grid ; grid-template-columns : 110px 330px 160px ; grid-template-rows : 450px 150px 450px ; grid-template-areas : " core-stats defense skills " " core-stats defense skills " grid-gap: 5px ; } . charsheet div . core-stats { grid-area : core-stats ; } . charsheet div . defense { grid-area : defense ; } . charsheet div . skills { grid-area : skills ; } . charsheet div . health { display : grid ; grid-template-columns : 52px 52px 52px 52px 52px 52px ; grid-template-rows : 2em 2em ; row-gap : 5px ; column-gap : 5px ; } div . core-edit { display : grid ; grid-template-columns : 5em 5em 5em 5em 5em 5em 5em 5em 5em 5em ; row-gap : 1px ; column-gap : 1px ; } . sheet-button-roll { background-color : rgb ( red , green , blue ) ; font-family : dicefontd7 ; content : " l " ; color : # 500000 ; width : 2em ; }