Alignment issues

So i am still new with all this, im creating custom sheet for my game so i have a reason to learn basic HTML and CSS. I have a SELECT field and a INPUT NUMBER FIELD that are not lining up right, could someone tell me what im doing wrong. Below is the HTML and CSS and a pic of what is wrong i would appreciate it. i have been looking at the wiki for a few hours now. with no luck. HTML <div class="sheet-hp sheet-block"> <table> <tr> <th> <select name="attr_armor" class="arm"> <option value="[[4]]">Normal</option> <option value="[[6]]">Boon</option> <option value="[[8]]">Bane</option> </select> </th> <th> <input name="attr_ab" type="number" value="@{armor}" disabled="true" /> </th> <th> <input name="attr_abb" type="number" value="0" />Se </th> </tr> </table>   </div> CSS .charsheet .sheet-grid-section{   display: grid;   grid-template-columns: 550px 250px;   grid-template-rows:  225px 150px 150px 150px;   grid-template-areas:"namelvl hp     "                       "skills  stat   "                       "skills  equip  "                       "notes   equip  ";   grid-gap: 5px; } .charsheet div.sheet-block{   display: grid;   justify-content: top;   padding: 5px; } .charsheet div.sheet-namelvl{   grid-area: namelvl;   border: 3px solid red; } .charsheet div.sheet-hp{   grid-area: hp;   border: 3px solid green;   justify-content: left; } .charsheet div.sheet-stat{   grid-area: stat; } .charsheet div.sheet-skills{   grid-area: skills; } .charsheet div.sheet-equip{   grid-area: equip; } .charsheet div.sheet-notes{   grid-area: notes; } .button{ width:100px; } .arm{ width:100px; }

Different types of element often don't line up perfectly. Selects are sadly notorious for not lining up with others. You can fix this but putting a margin-top: on certain elements, either the inputs or selects. It can be negative (which moves the element up. Also don't use HTML TABLE. You know how to use grid, which is the alternative I usually suggest. Your HTML could be <div class="sheet-hp sheet-block"> <select name="attr_armor" class="arm">      <option value="[[4]]">Normal</option> <option value="[[6]]">Boon</option> <option value="[[8]]">Bane</option>         </select> <input name="attr_ab" type="number" value="@{armor}" disabled="true" /> <input name="attr_abb" type="number" value="0" />Se   </div> The grid will split those 3 elements into nice columns.

Im using the Grid Template from the wiki, the only reason i put it in a Table was because when its not in a table the number boxes get larger and they wont line up at all. Im not sure what is causing it to do that. 

Here is the CSS and HTML <div class="sheet-hp sheet-block"> <select name="attr_armor" class="arm"> <option value="[[4]]">Normal</option> <option value="[[6]]">Boon</option> <option value="[[8]]">Bane</option> </select> <input name="attr_ab" type="number" value="@{armor}" disabled="true" /> <input name="attr_abb" type="number" value="0" />   </div>   <div class="sheet-stat sheet-block">     <h3>Main Stat</h3>   </div>   <div class="sheet-skills sheet-block">     <h3>Skills</h3>     <label><button name="roll_str" value="/r 1d6+@{str}" type="roll"></button> strength <input type="number" name="attr_str"></label>     <label><button name="roll_agi" value="/r 1d6+@{agi}" type="roll"></button> agility <input type="number" name="attr_agi"></label>     <label><button name="roll_mind" value="/r 1d6+@{mind}" type="roll"></button> mind <input type="number" name="attr_mind"></label>   </div>   <div class="sheet-equip sheet-block">     <h3>Equipment</h3>   </div>   <div class="sheet-notes sheet-block">     <h3>Notes</h3>   </div> </div> CSS /*Configure the tab buttons*/ .charsheet .sheet-character, .charsheet .sheet-config, .charsheet .sheet-journal, .charsheet .sheet-test {     display: none; } /* show the selected tab */ .charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character, .charsheet .sheet-tabstoggle[value="configuration"] ~ div.sheet-config, .charsheet .sheet-tabstoggle[value="journal"] ~ div.sheet-journal, .charsheet .sheet-tabstoggle[value="test"] ~ div.sheet-test {     display: block; } .charsheet .sheet-grid-section{   display: grid;   grid-template-columns: 550px 250px;   grid-template-rows:  225px 150px 150px 150px;   grid-template-areas:"namelvl hp     "                       "skills  stat   "                       "skills  equip  "                       "notes   equip  ";   grid-gap: 5px;     } .charsheet div.sheet-block{   display: grid;   padding: 5px;   border: 3px solid black; } .charsheet div.sheet-namelvl{   grid-area: namelvl;   border: 3px solid red; } .charsheet div.sheet-hp{   grid-area: hp;   border: 3px solid green; } .charsheet div.sheet-stat{   grid-area: stat; } .charsheet div.sheet-skills{   grid-area: skills; } .charsheet div.sheet-equip{   grid-area: equip; } .charsheet div.sheet-notes{   grid-area: notes; } .button{ width:100px; } .arm{ width:100px; }

The problem with number boxes getting larger is probably the way roll20 applies some default CSS styling to different elements, and you need to override it with your own CSS. See Specificity . I'm not sure which inputs they are (does your code include all the elements in your pic?). Number inputs in particular take some work to override on roll20. but something like .charsheet div.sheet-block input[type="number"] { /* insert desired styling here */ width: whatever width you want; } should be enough. number inputs have a defaut width: 3.5em; so you'd want to change that to your desired width.