CSS: Width and Max-Width

Question

Why does:

width: 98%;
max-width: 1140px;

do the same as

width: 1140px;
max-width: 98%;

The first one make

Answer 1

here is how I understand them .. they are 2 boxes -> width and max -width .

width can't exceed max-width if so width has no effect . like wise if you defined max-width lower than width .. width has no effect .

at anytime your browser converts your % into most likely pixels yet the rules above still apply .

examples :

width: 98%;
max-width: 1140px;

this is translated to :

width : 1960px;
max-width : 1140px;

this means -> only max width applies .

width: 1140px;
max-width: 98%;

this is translated to :

width : 1140;
max-width : 1960px;

this means -> width is 1140 but can't exceed 1960 .