Textarea At 100% Width Overflows Parent Container

Reset also the textarea, I don't see it at your reset CSS.

Probably it is inheriting some margin.

Whilst both answers (currently) provide useful relevant information, neither actually provide a solution, which is simply to add box-sizing: border-box; to the textarea, i.e.

form textarea {
    width: 100%;
    box-sizing: border-box;
    height: 500px;
}

box-sizing: border-box; is supported in all modern browsers including IE8 (but not IE7), and means that the element's width including border and padding is used when calculating layout.

The default is normally content-box which uses the element's inner width only. Most browsers supply their own default border and padding styles for textarea, but not always box-sizing, so the result may be that width: 100%; means the parent's width plus the browser's default border and padding, which, if those are non-zero, is obviously more than the width of the parent container.