I have experienced a special flavor of hell today.
While trying to adjust the table cell widths of the "Who is Online" list in the side column, I found that CSS wouldn't change anything when I specified the maximum width of the user name column.
It was set to 50%. I tried table-layout: fixed and table-layout every other option. Nothing changed. I cleared the cache. No change.
It turns out that a percentage width doesn't work on a table cell if its content blows out its maximum width. Setting word-wrap to break-word changed nothing. Setting the overflow to hidden changed nothing.
I finally had to do the dirty, last-resort hack of CSS: I used the !important directive.
That finally fixed it... for the desktop style sheet but the mobile style sheet required entirely different adjustments to get the user names in the "Who is Online" area under control if they were too long.
I think if you register with a long user name, I'll either lower the maximum length limit or I'll edit it myself. 
My point about CSS is that it's not intuitive regarding what values are inherited and from where. Although I'm quite familiar with CSS in regard to figuring out how to get things to look right, I do have a gap in my knowledge about its inner workings. Eventually, I need to stop hacking together my CSS and actually have a much better plan from the start of the design process, armed with a better understanding of how CSS is supposed to be applied based on its complicated rules of inheritance.
