Hmmmr. Seems to be working fine when I checked it.
Did you add PADDING along with the 100% width? At which case the bar would indeed become longer tan its container and/or have uneven gap as you described.
This is the case where Firebug is handy ( tho not needed) remember that the actual physical space an object takes is its width plus its padding plus ( although you dont see it, it matters for floating ans spacing) it's margins.
Also, remember a DIV is a a block element... you actually don't need to declare width on it and it will stretch automatically to fit its container , w/o need of calculating padding or margin ( unless you give it a width)
All that I said above also applies to #thankyou which actually computes to 600px..
Why is it that when I make .graybar 100% it extends beyond the #thankyou container and that when I set it to 580px it has a larger gap on the right side? (5px + 580px + 5px = 590px?!)
590px of content + 10px (2*5) of padding.
anyway, I would suggest simply doing this:
z-index: 0; /* Place below other elements */
margin: 10px auto;
border: 1px solid #444;