Waarom zou max-width hierin niet werken?

Waarom werkt ‘max-width’ niet bij het volgende niet als je gewone oude CSS gebruikt:

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

De wrapper voor dit element:

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

BEWERKEN

Code toegevoegd aan jsfiddle: http://jsfiddle.net/BXdrG/

Antwoord 1, autoriteit 100%

Om max-widthcorrect te laten werken, moet je element eerst een bepaalde widthhebben. Gebruik 100%om te bereiken wat je wilt. Zie hier:

http://jsfiddle.net/QsHa9/

Antwoord 2, autoriteit 81%

Ah ok, ik heb het gebruik ervan verkeerd begrepen. Om een vloeiende knop te krijgen die niet uitrekt tot enorme maten, heb ik het volgende toegevoegd:

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

Bedankt reageerders!

Antwoord 3, autoriteit 14%

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