Understanding max-width

The max-width setting is used to adjust how wide content should appear. The higher the max-width the wider the content; the lower the max-width the more condensed the content.

For example, below are two screenshots showing how different values affect the width of the content. 

Max-width = 1200px

Max-width = 400px

This setting can be defined at both the section and box level, and the appearance of the content often depends on the value of this setting at both levels. In the above examples, the max-width of the box (which contains all the content in this section) was set to "auto". This means that the box inherited the width defined at the section level. This is why the above examples show changes to the appearance of the text content when the value of the section's max-width change.

This is important because it highlights the fact that adjusting the max-width of a section won't always change the appearance of the content, nor will adjusting the max-width on a box.

Below is an example of this behavior. The section has a max-width of 1200px, but because the box has a max-width of 600px the appearance of the content isn't changed.

Here's a second example: the box below has a max-width of 600px, but the content in the box can't extend past 200px. This is because the max-width of the section is set to 200px, which means that's the upper limit for any content it contains.