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.
//the following example shows a <div> element with a height of 100 pixels
// and a max-width of 500 pixels