max-width: 100%?

"max-width" is a maximum width meaning that the element can not be bigger then the value input but can be smaller.

"min-width" is a minimum width meaning that the element can not be smaller then the value input but can be larger.

"width" is a standard width measurement for defining the exact width of an element.

Defining "width:100%" means that the width is 100%.

Defining "max-width:100%" means that the width can be anywhere between 0% and 100% but no more then 100%.

For example if my display has a 1200px availible width. If I create for example:

#box{
   width: 100%;
   min-width: 500px;
   max-width: 800px;
}

"Width: 100%; would set the box to be 1200px width on my display, but lets say I want to limit the maximum size 100% can be, you would do this by defining "max-width" and "min-width" for the vice versa minimum size.

This would mean if my display is larger then 800px width it will make sure my box does not grow bigger then 800px and also that if my display is smaller then 500px it will not shrink smaller then 500px. But if my screen is anywhere between 500px and 800px it will automatically re-size to the availible width of my device that could be anywhere between 500px and 800px;