Width if one of my fields will not change

Im having trouble getting one of my fields to change widths. Im not sure if it is because it is a number field. but i would love if someone could tell me what is going wrong. Below is the HTML and CSS. The number field will not change.  HTML <div class="bio1">      <input  name="attr_charactername"         class="text200" type="text"   value="Character Name">      <select name="attr_background"            class="text100"> <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>      <input  name="attr_level"                 class="text080" type="number" value="0" max="10">      <input  name="attr_proficiency"           class="text090" type="text"   value="@{proficiencydisplay}"     disabled="true" />      <input  name="attr_passive_perception"    class="text090" type="text"   value="10+@{perception_total}"    disabled="true" />      <input  name="attr_passive_insight"       class="text090" type="text"   value="10+@{insight_total}"       disabled="true" />      <input  name="attr_passive_investigation" class="text090" type="text"   value="10+@{investigation_total}" disabled="true" /> </div> CSS /* Sheet Body */ /* Sheet Props */ .sheet select { height: 25px; text-align:center; } .sheet input[type="text"] { height: 25px; } .sheet input[type="number"] { height: 25px; width: 100%; } /* Sheet Divs */ div.sheet{ display: grid; width:850px; justify-items: center; text-align:center; margin: 0 auto; } div.playersheet{ display: grid; width:850px; } div.campsheet{ display: grid; width:850px; } .toggle[value="1"] ~ .playersheet, .toggle[value="0"] ~ .campsheet{     display: none; } /* Sheet Text Widths */ .text020{ width: 20px; text-align: center; } .text025{ width: 25px; text-align: center; } .text050{ width: 50px; text-align: center; } .text060{ width: 60px; text-align: center; } .text075{ width: 75px; text-align: center; } .text080{ width: 80px; text-align: center; } .text090{ width: 90px; text-align: center; } .text100{ width: 100px; text-align: center; } .text115{ width: 115px; text-align: center; } .text200{ width: 200px; text-align: center; } /* Section 1 */ /* Section 1 Divs */ div.section1{ border: 5px solid purple; display: grid; width:850px; justify-items: center; margin: 0 auto; } div.header1{ display: grid; grid-template-columns: 200px 100px 80px 90px 90px 90px 90px; grid-auto-rows: 20px; justify-items: center; } div.bio1{ display: grid; grid-template-columns: 200px 100px 80px 90px 90px 90px 90px; height: 25px; justify-items: center; }

Generally if one thing isn't working, but the same technique is working for other similar things, look at specificity . I assume this is the one that isn't working: .text080{ width: 80px; text-align: center; } Change the declaration block to .charsheet div.bio1 .text080{ width: 80px; text-align: center; } And see if it works. I can't remember the required specificity for number inputs, but IIRC its higher than most other elements.

This will be overriding your text080 class: .sheet input[type="number"] { height: 25px; width: 100%; } because its specificity is higher (21 vs 10 IIRC).

So when I removed the Width: 100% it did not change. When I replaced text080 with .charsheet div.bio1 .text080 it did. The thing is i was hoping to use the text080 on other places on my sheet. which would mean i would have to add div.### every time i used the text080 right? Is the problem because it is a type=number and not a type=text like the other fields? 

You can change this div.### to any other container that contains all the objects where you want to use that class. This will probably work: .ui-dialog div.charsheet because ui-doialog and ,charsheet are divs above the character sheet but which are always present in every character sheet. Is the problem because it is a type=number and not a type=text like the other fields? The problem is that roll20 has some hidden styles with their own specificity, and type=number inputs require a higher specificty to override.

Ok now i understand thank you for your help. it is greatly appreciated.