What is the purpose of using the max-width property on a wrapper div?

The max-width property is primarily useful for ensuring that your wrapper div is never wider than the value you declare. For example, if you want your website to have a nicely centered layout and never get wider than 700px, even on very large screens like a 27" iMac, then you could write a rule like this:

.wrapper {
  margin: 0 auto;
  max-width: 700px;
}

The wrapper div will never get wider than 700px, no matter how large the display. However, keep in mind that the wrapper div will shrink automatically to fit narrow displays. To address this, you can use min-width. Similarly to max-width, the wrapper div will never shrink smaller than the value you set. For example:

.wrapper {
  margin: 0 auto;
  min-width: 320px;
  max-width: 700px;
}

Now your rule will make sure the wrapper div never shrinks smaller than 320px or grows larger than 700px, but will automatically resize to fit the display as long as it's width is between those two values.

I hope that helps! :)

Using a max-width helps when width is set to a percentage.

.wrapper {
  width: 50%;
  max-width: 500px;
}

On a normal computer monitor, the max-width probably won't get used, but if you open the same page on a smart tv, without the max-width, the div would be pretty huge.