Setting max-width

//the following example shows a <div> element with a height of 100 pixels
// and a max-width of 500 pixels

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

The max-width property is used to set the maximum width of an element.
Can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).
The value of the max-width property overrides width.
The problem with the <div> above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page. Using max-width instead, in this situation, will improve the browser's handling of small windows.

Setting max-width

Setting max-width — Structure map

Setting max-width — Related pages:

Height and Width