I think I broke my .css

So, this is the experimental, and highly broken, version of my 2E sheet I'm working on. I'm not sure where I messed up so heavily, but, the sheet only displays half a word in a tab followed by the last word, running off the left side of the sheet. Beyond that, it does nothing. Anyone good with css care to lend a hand? <a href="https://gist.github.com/Project462/b56cf948227ea0b300172e4d5908b80c" rel="nofollow">https://gist.github.com/Project462/b56cf948227ea0b300172e4d5908b80c</a> &lt;html <a href="https://gist.github.com/Project462/c3ca5fda8894ccd49b31ac104b9ae0f1" rel="nofollow">https://gist.github.com/Project462/c3ca5fda8894ccd49b31ac104b9ae0f1</a> &lt;css Edit: fixed second link

You've linked to the HTML twice.

Sorry about that, a bit tired. Fixed though

Try changing/removing &nbsp;margin-left: -91px; for&nbsp;span.sheet-tab&nbsp; After doing so, you'll need to adjust the width and height of your tabs and the hidden inputs(checkboxes) to get things lined up. &nbsp;On the hidden inputs " input[type="radio"],input[type="checkbox"] " use position:absolute, remove top: and left: to prevent them from pushing your tabs around. &nbsp;Cheers Not sure of your layout, I just made width:120px height:30px...

Ok, I fixed that, and, part of the sheet, shows up, but, none of the tabs work. For some reason, it only shows the psionics section, at all. I've linked the updated codes below: <a href="https://gist.github.com/Project462/b56cf948227ea0b300172e4d5908b80c" rel="nofollow">https://gist.github.com/Project462/b56cf948227ea0b300172e4d5908b80c</a> &lt;html <a href="https://gist.github.com/Project462/c3ca5fda8894ccd49b31ac104b9ae0f1" rel="nofollow">https://gist.github.com/Project462/c3ca5fda8894ccd49b31ac104b9ae0f1</a> &lt;css Edit: Correction, the sheet shows up fine, but the tabs are unselectable so you get stuck in whichever section you are on / start with :/

Code below works for me. &nbsp;This was just a quick test from the original code you posted. &nbsp;Still needs some "attention" such as the layout you want and it seems some of the tabs don't highlight(psionics and equipment). htm:&nbsp; <a href="https://gist.github.com/vince-roll20/5cbea98fdc7018dfdad3a2753a99d9ce" rel="nofollow">https://gist.github.com/vince-roll20/5cbea98fdc7018dfdad3a2753a99d9ce</a> css:&nbsp; <a href="https://gist.github.com/vince-roll20/a41cf8bffeeb504de1082a43c3a74fc8" rel="nofollow">https://gist.github.com/vince-roll20/a41cf8bffeeb504de1082a43c3a74fc8</a>

Ok, I think I've almost got this figured out with your help. The buttons (except for one, but I'll worry about that later) "work" but they don't do anything. I can click them, and they highlight, but nothing changes or moves. Is this perhaps a problem with my html?

[Solved] I found the problem. I had no content reference built into the div. Thanks for the help Vince :)

Glad to hear you figured it out. &nbsp;Have fun.