Resizing my buttons

I am trying to change the size of the buttons. let me be honest button 1 will roll information on the unit, Button 2 is a place holder, and button 3 is another place holder.  What im looking for is this.  Button 1 to only show the d20 and to resize around it Button two to be a set width.  and button 3 to be a different set width.  I have tried a few things but nothing seems to work. below is the section of code im trying to use. would someone be able to tell me what I'm doing wrong. please? HTML </div> <div><!-- Militia Unit --> <button class="button2" type="roll" value="&{template:default} {{name=Millita Unit}} {{Move= 1 Square}} {{Type=FvF}} {{Attack=[[1d4]]}} {{Counter= [[1d3]]}}" ></button> <button>Militia Unit</button> <input name="attr_militia_unit"                  type="number" value="0"> <input name="attr_militia_unit_gold_cost"        type="number" value="@{militia_unit}*1" disabled="true" /> <input name="attr_militia_unit_citizens_cost" type="number" value="@{militia_unit}*1" disabled="true" /> <input name="attr_militia_unit_food_cost"        type="number" value="@{militia_unit}*1" disabled="true" /> <input name="attr_militia_unit_magic_cost"      type="number" value="@{militia_unit}*0" disabled="true" /> <input name="attr_militia_unit_luxury_cost"      type="number" value="@{militia_unit}*0" disabled="true" /> <input name="attr_militia_unit_wood_cost"        type="number" value="@{militia_unit}*0" disabled="true" /> <input name="attr_militia_unit_stone_cost"      type="number" value="@{militia_unit}*0" disabled="true" /> <input name="attr_militia_unit_metal_cost"      type="number" value="@{militia_unit}*0" disabled="true" /> <button class="button3">Cost 4 Gold</button> </div> and the CSS button{     width:100px !important;     font-size:12px; } #button2 {     width:50px !important; } #button3{     width:80px !important; }

There is a fair bit of default styling applied to roll buttons, and it doesn't look like you have removed any of that as mentioned on the wiki: <a href="https://wiki.roll20.net/CSS_Wizardry#Button" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Button</a> You might want to give that a try and see how it goes.

As Kraynic points out, this is almost certainly a CSS specificity issue. Address your buttons using it as shown below: Also, I just noticed you are not using the correct syntax anyway. You are using id syntax (#), you want to use class syntax (.class-name). .charsheet button[type="roll"]{ &nbsp; &nbsp; width:100px !important; &nbsp; &nbsp; font-size:12px; } .charsheet button.button2 { &nbsp; &nbsp; width:50px !important; } .charsheet button.button3{ &nbsp; &nbsp; width:80px !important; } If you are using Legacy code, that would be .charsheet button[type="roll"]{ &nbsp; &nbsp; width:100px !important; &nbsp; &nbsp; font-size:12px; } .charsheet button.sheet-button2 { &nbsp; &nbsp; width:50px !important; } .charsheet button.sheet-button3{ &nbsp; &nbsp; width:80px !important; }

Also, this last button: &lt;button class="button3"&gt;Cost 4 Gold&lt;/button&gt; Is it unfinished? because there's a few things missing from that button element and it won't work properly (type, name, and value). The same goes for this one: &lt;button&gt;Militia Unit&lt;/button&gt; Maybe they should be spans or headings? Also the one nearly complete button is missing a name (something like name="roll_NAME_HERE"). It will work without a name, mostly, but cant be dragged to the macro bar and cant be addressed as an ability.