? max-width in CSS

The max-width property sets the maximum width an element can grow to. It limits the width but doesn’t force it smaller than its content or other constraints.

How max-width works

• The element’s width can be less than or equal to the max-width value.

• Prevents the element from becoming wider than the specified max.

• Useful for making layouts responsive by capping size on large screens.

Syntax

selector {  max-width: value;}

• value can be in px, %, em, rem, vw, etc.

• none (default) means no maximum limit.

Example

.container {  max-width: 1200px;  width: 100%; /* make container shrink on small screens */  margin: 0 auto; /* center horizontally */}

This keeps the container at full width on small screens but never wider than 1200px on large screens.

Common Use Cases

• Limit content width for readability.

• Responsive containers that adjust but don’t get too wide.

• Images or videos that scale but have a maximum size.

Want me to show you examples with responsive layouts using max-width?