Formatting Button

Hello,  So i was wondering if there is a way to change the how a button displays? When i add a roll button it seem to coming with padding on the side of the button, even when i have the margin and padding set to 0. this would not bother me if the space was even on both side but it is not. i have been looking through the wiki for about 3 hours and have not found a solution. is there a way to fix this i will add a pic and my html and css. CSS .ui-dialog .charsheet button[type=roll]:before  {     content: ""; } button[type=roll], button[type=action], button[type=compendium], button[type=cancel], button[type=submit], button[type=finish], button[type=back], label{     background-color: light Gray;     border: none;     line-height: 12px;     background-image: none;     box-shadow: none;     padding: 0px;     margin: 0px;     font-weight: bold;     text-align:center;     position:center; justify-items: center; } button[type=roll]::before{     content: "" !important; } .sheet input[class="checkbox1"] { height: 28px; width: 28px; } .sheet input[class="checkbox2"] { height: 22px; width: 22px;   } .text1{ height: 22px; width: 200px; text-align: center; } .text2{ height: 22px; width: 100px; text-align: center; } .text3{ height: 22px; width: 75px; text-align: center; } .text4{ height: 22px; width: 90px; text-align: center; } .text5{ height: 22px; width: 50px; text-align: center; } .text6{ height: 22px; width: 160px; text-align: center; } .text7{ height: 22px; width: 110px; text-align: center; } .button1{ width:100px; text-align: center; padding: 0px; margin: 0px; } div.sheet{ display: grid; width:830px; justify-items: center; text-align:center; margin: 0 auto; } /* Section 1 */ div.section1{ border: 3px solid purple; display: grid; width:830px; justify-items: center; } div.header1{ display: grid;     grid-template-columns: 200px 100px 75px 75px 75px 90px 90px 90px; grid-auto-rows: 20px; } div.bio1{ display: grid;     grid-template-columns: 200px 100px 75px 75px 75px 90px 90px 90px; grid-auto-rows: 22px; } div.header2{ display: grid;     grid-template-columns: 220px 20px 220px 5px 50px 10px 220px 5px 50px;  grid-auto-rows: 20px; } div.bio2{ display: grid;     grid-template-columns: repeat(10,22px) 20px repeat(10,22px) 5px 50px 5px repeat(10,22px) 5px 50px; grid-auto-rows: 22px; } div.header3{ display: grid;     grid-template-columns: 160px 110px 50px 50px 5px 50px 50px 5px 100px 15px 22px 50px;     text-align:center; } div.bio3{ display: grid;     grid-template-columns: 160px 110px 50px 50px 5px 50px 50px 110px 22px 50px;     text-align:center; grid-auto-rows: 22px; } HTML <div class="sheet"> <div class="section1"> <div class="header1"> <h4>&nbsp </h4> <h4>&nbsp </h4> <h4>&nbsp </h4> <h4>&nbsp </h4> <h4>&nbsp </h4> <h4>Passive</h4> <h4>Passive</h4> <h4>Passive</h4> <h4>Name</h4> <h4>Background</h4> <h4>Class</h4> <h4>Level</h4> <h4>Proficiency</h4> <h4>Perception</h4> <h4>Insight</h4> <h4>Investigation</h4> </div> <div class="bio1"> <input  class="text1" name="attr_CharacterName"  type="text"  value="Character Name"> <select class="text2" name="attr_Background"> <option value="1000">---</option> <option value="1001">Acolyte</option> <option value="1002">Aristocrat</option> <option value="1003">Athlete</option> <option value="1004">Charlatan</option> <option value="1005">Criminal</option> <option value="1006">Entertainer</option> <option value="1007">Laborer</option> <option value="1008">Medic</option> <option value="1009">Scholar</option> <option value="1010">Soldier</option> <option value="1011">Survivalist</option> <option value="1012">Traveler</option> <option value="1013">Urchin</option> </select> <select class="text3"      name="attr_Class"> <option>None</option> <option>Expert</option> <option>Fighter</option> <option>Leader</option> </select> <input  class="text3"          name="attr_Level"          type="text"  value="0"    max="10"> <input  class="text3"          name="attr_Proficiency"    type="text"  readonly /> <input  class="text4"        name="attr_Passive_Perception"     type="text"   value="10+@{Perception_Total}+@{Observant_Checkbox}"  disabled="true" /> <input  class="text4"        name="attr_Passive_Insight"        type="text"   value="10+@{Insight_Total}"                           disabled="true" /> <input  class="text4"        name="attr_Passive_Investigation"  type="text"   value="10+@{Investigation_Total}"                     disabled="true" /> </div> <div class="header2"> <h4>Exhaustion</h4> <h4>&nbsp </h4> <h4>Minor Wounds</h4> <h4>&nbsp </h4> <h4>Fitness</h4> <h4>&nbsp </h4> <h4>Sanity</h4> <h4>&nbsp </h4> <h4>Total</h4> </div> <div class="bio2"> <input class="checkbox2"   type="checkbox" name="attr_ex1"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_ex2"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_ex3"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_ex4"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_ex5"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_ex6"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_ex7"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_ex8"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_ex9"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_ex10"     value="1"> <h4>&nbsp </h4> <input class="checkbox2"   type="checkbox" name="attr_mw1"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_mw2"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_mw3"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_mw4"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_mw5"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_mw6"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_mw7"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_mw8"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_mw9"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_mw10"     value="1"> <h4>&nbsp </h4> <input class="text5"       type="text"     name="attr_totlevel" value="0-(@{MW_Level}+@{EX_Level})"  disabled="ture"/> <h4>&nbsp </h4> <input class="checkbox2"   type="checkbox" name="attr_sn1"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_sn2"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_sn3"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_sn4"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_sn5"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_sn6"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_sn7"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_sn8"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_sn9"      value="1"> <input class="checkbox2"   type="checkbox" name="attr_sn10"     value="1"> <h4>&nbsp </h4> <input class="text5"       type="text"     name="attr_sanlevel" value="[[0-(@{sn1}+@{sn2}+@{sn3}+@{sn4}+@{sn5}+@{sn6}+@{sn7}+@{sn8}+@{sn9}+@{sn10})]]"  disabled="true" /> </div> <div class="header3"> <h4>Armor</h4> <h4>Shield</h4> <h6>Bonus</h6> <h4>AC</h4> <h4>&nbsp </h4> <h4>HP</h4> <h4>Max</h4> <h4>&nbsp </h4> <h4>&nbsp </h4> <h4>&nbsp </h4> <h4>Initiative</h4> </div> <div class="bio3"> <input  class="text6" name="attr_Equiped_Armor"  type="text" readonly /> <input  class="text7" name="attr_Equiped_Shield" type="text" readonly /> <input  class="text5" name="attr_ac3"            type="text" value="0" > <input  class="text5" name="attr_AC_Total"       type="text" readonly /> <h4>&nbsp </h4> <input  class="text5" name="attr_Curren_hp"  type="text"  value="0"> <input  class="text5" name="attr_Max_hp"     type="text"  readonly /> <input  class="text7" name="attr_Max_hp"     type="text"  readonly /> <input  class="checkbox2"         name="attr_Level_Up"     type="checkbox"  value="1"> <input  class="text5" type="text"     name="attr_Initiative" value="(@{Dex_Mod})+.@{Dex}" disabled="true" /> </div> <div class="bio3"> <input  class="text6" name="attr_Equiped_Armor"  type="text" readonly /> <input  class="text7" name="attr_Equiped_Shield" type="text" readonly /> <input  class="text5" name="attr_ac3"            type="text" value="0" > <input  class="text5" name="attr_AC_Total"       type="text" readonly /> <h4>&nbsp </h4> <input  class="text5" name="attr_Curren_hp"  type="text"  value="0"> <input  class="text5" name="attr_Max_hp"     type="text"  readonly /> <button class="button1" type="roll" value="&{template:default} {{name=@{CharacterName} Level Up}}  {{HP=[[1d@{lv0roll}r1]]}}">Level Up</button> <input  class="checkbox2"         name="attr_Level_Up"     type="checkbox"  value="1"> <input  class="text5" type="text"     name="attr_Initiative" value="(@{Dex_Mod})+.@{Dex}" disabled="true" /> </div> <div class="bio3"> <input  class="text6" name="attr_Equiped_Armor"  type="text" readonly /> <input  class="text7" name="attr_Equiped_Shield" type="text" readonly /> <input  class="text5" name="attr_ac3"            type="text" value="0" > <input  class="text5" name="attr_AC_Total"       type="text" readonly /> <h4>&nbsp </h4> <input  class="text5" name="attr_Curren_hp"  type="text"  value="0"> <input  class="text5" name="attr_Max_hp"     type="text"  readonly /> <input  class="text7" name="attr_Max_hp"     type="text"  readonly /> <input  class="checkbox2"         name="attr_Level_Up"     type="checkbox"  value="1"> <input  class="text5" type="text"     name="attr_Initiative" value="(@{Dex_Mod})+.@{Dex}" disabled="true" /> </div> </div> </div>

Not sure if this is causing your alignment issue, but I don't believe there is a "center" option for position . ie position:center; Try changing to position: relative; One trick I use when working out css issues is to temporarily apply "outline: 2px solid red;" to a given class to help isolate the element I'm working with.  I often do this in the browser's inspect element screen.  You should also be able to better see the hierarchy of styles that are affecting a given element/class to help identify what is causing the problem. example (use Layout and Computed tabs to help troubleshoot. image is from FF, but Chrome is similar);

As Vince says, they do seem to be a few questionable CSS inclusions there. It looks like you have been adding a bunch of stuff and hoping some of it works. I would delete all the CSS, and see what Roll20 applies by default, and you'll see what you want or need to override. Roll20 isn't like other sites, there's a lot that will be fine in the wider web that doesn't work on roll20. A lot of your buttons are invalid, for example - including them doesn't harm anything, but just doesn't do anything and bloats your code unneccessarily. Also you have .sheet - are you using the class sheet anywhere? If so, I'd change that name for safety reasons. There's history there. You are using a lot of classes like text1 , text2 , text3 , etc - I would avoid names like that. Instead give them a descriptive name that tells you what that class does. You'll be grateful later.