Why don't <textarea> and <input> elements respect max-width?

Question

The following HTML:

Answer 1

Ran into this very problem this morning. While the first answer relates to mine, I feel further explanation is necessary:

Working Demo: jsFIDDLE Demo

1) As stated above, first it's important to set inputs to 100% width at the top of your css file:

input,textarea {
     width:100%;
     display:block }

2) The input will now, by default, extent 100% of the length of the parent div. So if you want to achieve a "max-width," you need to set width properties within the parent div.

.input-container {
     max-width: 300px; }

3) Add padding to the parent div to give a fixed space to the right/left of the input

.input-container {
     padding: 25px 25px;
     max-width: 300px; }

Let me know if something isn't clear.

jsFIDDLE Demo