Formatting Help

I have had a ton of help with learning HTML and CSS for creating a character sheet. but i feel im at the limit with the time i have left before my new game starts. There is only on section of my sheet im not happy with and that is the weapon attack section. i don't really know what i could do to help it look smoother or less clunky. I know it can be done.  So i reaching out the see if someone more skills could remake it so i can see what i could have done differently. Ill add the HTML for what i have below.  Like is said im running out of time before the start of the game and would like to have the sheet im working on ready to go for this game. I know im asking alot but i would really appreciate the help. Thanks Here is what it looks like now. and here si the HTML <div> <!-- Weapon Attacks --> <div><!-- Heading --> <h2>Attacks</h2> </div> <div><!-- Weapons Attacks Info --> <span> <fieldset class="repeating_weapons"> <div><!-- Weapon Label --> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Weapon&nbsp &nbsp &nbsp &nbsp &nbsp S D &nbsp Bonus &nbsp P&nbsp &nbsp &nbsp Total&nbsp &nbsp &nbsp Ammo &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp S&nbsp D&nbsp C&nbsp I&nbsp W&nbsp C&nbsp &nbsp Bonus&nbsp &nbsp &nbsp DC &nbsp &nbsp &nbsp Save &nbsp &nbsp &nbsp &nbsp Range&nbsp &nbsp &nbsp Crit Range </div> <div> <button class="button2" type="roll" value="&{template:default} {{name=@{name1} @{weapon_name}}} {{Attack=[[1d20cs>@{crit_range}+@{attack_total}]] [[1d20cs>@{crit_range}+@{attack_total}]]}} {{Damage=[[@{weapon_damage}+[[@{dambonus}]]]] @{weapon_type}}}  {{Crit=[[@{critdamage}]] @{weapon_type}}} {{Saving Throw=[[@{savedc}]] **@{savetype}**}} {{Range=@{weapon_range}}} {{Description=@{weapondisc}}} {{Ammo=[[@{ammodice}cf<2]]}}"></button> <input  type="text"     name="attr_weapon_name"   class="weapon_name"         value="0"> <input  type="checkbox" name="attr_wpa"           value="@{str_mod}"  > <input  type="checkbox" name="attr_wpm"           value="@{dex_mod}"> <input  type="number"   name="attr_attack_bonus"  value="0"> <input  type="checkbox" name="attr_profb"         value="@{prof}"> <input  type="number"   name="attr_attack_total"  value="[[@{wpa}+@{wpm}+@{attack_bonus}+@{profb}]]" disabled="true"/> <select name="attr_ammodice" class="damagedie"> <option>1d1</option> <option>1d4</option> <option>1d6</option> <option>1d8</option> <option>1d10</option> <option>1d12</option> <option>1d20</option> <option>2d20</option> <option>3d20</option> </select> Saving Throw <input type="checkbox" class="skill" name="attr_strdc"     value="[[8+@{str_mod}+@{prof}]]"> <input type="checkbox" class="skill" name="attr_dexdc"     value="[[8+@{dex_mod}+@{prof}]]"> <input type="checkbox" class="skill" name="attr_condc"     value="[[8+@{con_mod}+@{prof}]]"> <input type="checkbox" class="skill" name="attr_intdc"     value="[[8+@{int_mod}+@{prof}]]"> <input type="checkbox" class="skill" name="attr_wisdc"     value="[[8+@{wis_mod}+@{prof}]]"> <input type="checkbox" class="skill" name="attr_chadc"     value="[[8+@{cha_mod}+@{prof}]]"> <input  type="number"   name="attr_savedc_bonus"  value="0"> <input  type="number"   name="attr_savedc"  value="[[(@{strdc}+@{dexdc}+@{condc}+@{intdc}+@{wisdc}+@{chadc}+@{savedc_bonus})]]" disabled="true"/> <select name="attr_savetype" class="damagedie"> <option>STR</option> <option>DEX</option> <option>CON</option> <option>INT</option> <option>WIS</option> <option>CHA</option> </select> <input  type="text"     name="attr_weapon_range"   class="damagedie"         value="0"> &nbsp &nbsp <input  type="number"   name="attr_crit_range"    value="0"> </div> <div><!-- Weapon Label --> Damage 1 &nbsp &nbsp Type 1 &nbsp &nbsp Crit Damage &nbsp &nbsp Bonus &nbsp Description </div> <div> <input  type="text"     name="attr_weapon_damage" class="damagedie" value=""> <input  type="text"     name="attr_weapon_type"   class="type" value=""> <input  type="text"     name="attr_critdamage"   class="damagedie" value=""> &nbsp &nbsp <input  type="number"     name="attr_dambonus"     class="damagedie"         value="0"> <input  type="text"     name="attr_weapondisc"   class="weapondisc"         value="0"> </div> </fieldset> </span> </div> </div>

It;s difficult to ofefr advice without knowing exactly how you want it to appear, or knowing thr system. That said, I do have some obseservations: I'm wondering what's going on here: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Weapon&nbsp &nbsp &nbsp &nbsp &nbsp S D &nbsp Bonus &nbsp P&nbsp &nbsp &nbsp Total&nbsp &nbsp &nbsp Ammo &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp S&nbsp D&nbsp C&nbsp I&nbsp W&nbsp C&nbsp &nbsp Bonus&nbsp &nbsp &nbsp DC &nbsp &nbsp &nbsp Save &nbsp &nbsp &nbsp &nbsp Range&nbsp &nbsp &nbsp Crit Range Once you start using CS, you should never need to use &nbsp again. I'd suggest wrapping everything - every bit of text -in its own html element, then you can use things like CSS Grid or Flex to arrange them. The individual headings there can be inside their own spans. You have the fieldset inside a span, I' don't know why. I'd remove that. The enclosing div might also be redundant too. The might be an attack of divitis (unneccesary divs). You don't need to include single items in a div. For example, this: <div><!-- Heading --> <h2>Attacks</h2> </div> should just be <h2>Attacks</h2>

This is for 5e, i know that there are a lot of 5e sheets but i wanted to make one to get some practice. i would like to make something like the 5e ogl sheet has but i feel like that might be out of my reach. or something that shows up closer to one line instead of what i have now. it was more of a i know it could look better but not sure how to get it there. i was hoping someone could give me a better example so i could reverse the prosses to learn what they did.  As for the &ndsp i feel i guess that show mow little i know i have heard of the Css Grid but have not had time to look into how it works. and im not sure what Flex is. do you have some good links that give me some examples of how it works? As far as the div that is just so i minimize the line. i know i don't need the divs. does it hurt the system to have them?  I'm still super new to this i started learning from nothing and i only am able to get in like 3 hours of practice and research a week. I'm so new at this i did not know HTML and CSS were different until I started trying to make my own sheet. I have learned by reversing what other people have done. and that has got me to where I'm at now. I'm kind of to the point i don't know what i don't know if that makes since.  Again i thank you for any help you can give.

I'd advise looking at my blog: <a href="https://cybersphere.me/roll20-sheet-author-master-list/" rel="nofollow">https://cybersphere.me/roll20-sheet-author-master-list/</a> For CSS Grid in particular: <a href="https://cybersphere.me/css-grid/" rel="nofollow">https://cybersphere.me/css-grid/</a> Grid is a way to automatically layout your code in rows and columns (let eme stress that: automatically ), and it is amazingly easy to use once you've used it a few times. Flex is a precursor to CSS Grid. It is better in some cases, but 99% of the time, all you need is Grid.

Is the saving throw actually something that can allow for multiple options? If not, change it to a select drop-down list. It may also be useful to have a button to hide a lot of this information that won't change, allowing someone to set up the attack and then hide everything except the most important information.

I would love to do something like that. Do you have an example of how i would set that&nbsp; up?