Not Able to Do Max Width

Why would max-width not work on this?

Ah ok, 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 commenters!

not able to do max width

So, in your CSS, you can set the word-wrap property to break-word so that your string of text (w/ no whitespace) will be made to fit into the max-width:

E.g.

<style type="text/css">

#content {
    max-width: 50px;
    word-wrap: break-word;
}

</style>

CSS max-width not working

You can set:

#wrapper {
    -webkit-box-sizing: border-box; /* Safari, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    width: 100%;
    max-width: 1200px;
    height: 100px;
    margin: 0 auto;
    border: 4px solid;
}

not (max-width: 512px) not working

You can use the following media query:

@media not all and (max-width: 512px) {  * {     color: red;  } }

<span>Foobar</span>

Max-Width in CSS not working

The problem is "margin: 0 auto". Remove this or modify it and it works.
margin: 0 auto is basically centering the content, not pushing anything to the right. jsfiddle

div.container {
max-width: 500px;
padding: 0 20px 0 20px;
margin: 0;

}

div with max-width not taking the max width

You're centering the container using the following code:

position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)

When you're giving an element a position: absolute and giving a left: 50%, it will automatically move itself and it's subsequent children (if the children doesn't have position: absolute) to 50% from the left.

If you want the container to take up the full width, you'll have to remove the following:

position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)