Why is max-width not working on this?

Question

Using plain old CSS, why "max-width" doesn't work on the following:

button { text-align: center; max-width: 540px; height: auto; display: block; padding: 10px 0; margin: 0 auto; border: none; } 

Wrap for this item:

 #wrapper { max-width: 1024px; overflow: hidden; position: relative; margin: 0 auto; padding: 0 50px; text-align: center; } 

EDIT

Code added to jsfiddle: http://jsfiddle.net/BXdrG/

Answer 1

Well, I misunderstood its use. To get a fluid button that won't stretch to massive sizes, I added the following:

 width:100%; max-width: 540px; 

Thanks to the commentators!

Answer 2

For max-width to work correctly, your element first needs a certain width . Use 100% to achieve what you want. See here:

http://jsfiddle.net/QsHa9/

Answer 3

 button { text-align: center; max-width: 540px; height: auto; display: block; padding: 10px 0; margin: 0 auto; border: none; width:100%; /* you forgot this */ }