The CSS max-width property

Q: What is the difference between width and max-width?

width sets a target size; max-width sets a ceiling the element can stay below but never exceed. They are often combined for responsive containers.

Q: How do I make a responsive container in CSS?

Use width: 100%; max-width: 960px; margin-inline: auto;. It fills narrow screens and caps and centers on wide ones.

Q: What happens if width is bigger than max-width?

max-width wins. It is a hard limit, so the element will not exceed it even if width asks for more.

Q: How do I keep text lines readable?

Cap the text container with something like max-width: 65ch. The ch unit is based on character width, so it keeps lines to a comfortable measure.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS max-width property sets a ceiling on an element's width: it can be narrower, but never wider. The classic responsive container is width: 100%; max-width: 960px;, which fills small screens and caps out on large ones. It also overrides width when the two conflict.

Overview

max-width puts a ceiling on how wide an element can get. The element is free to be narrower, but it will never exceed the value, which makes it the single most useful property for building layouts that work on both a phone and a wide monitor.

The pattern you will use constantly is width: 100%; max-width: 960px;. On a small screen the element fills the available width; on a large one it stops growing at 960px and (with margin-inline: auto) centers in the leftover space. No media query needed: the cap does the responsive work on its own.

It is also the right tool for readable text. Lines that stretch the full width of a desktop are tiring to read, so capping a text column with something like max-width: 65ch keeps each line to a comfortable measure. When max-width and width disagree, max-width wins. It is a hard limit.

Syntax

/* responsive, centered container */
.container {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}

Values

The max-width property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value	Description
`none`	No maximum. The default.
`length`	A fixed ceiling such as 960px or 65ch.
`percentage`	A share of the containing block, e.g. 100%.
`min-content`	Cap at the content's minimum width.
`max-content`	Cap at the content's natural maximum width.

Example

 Live example
                                    
                                    <style>
  .container {
    width: 100%;
    max-width: 280px;
    margin-inline: auto;
    background: #1c7ce9;
    color: #fff;
    padding: 16px;
    border-radius: 10px;
    font: 15px/1.5 system-ui, sans-serif;
    text-align: center;
  }
</style>
<div class="container">I fill the width up to 280px, then stop and stay centered.</div>

Best practices

Use width: 100% with a max-width for containers. They fill small screens and cap on large ones, no media query required.
Cap text columns with a ch-based max-width (around 65ch) so lines stay a comfortable length to read.
Add margin-inline: auto to center a max-width container in the leftover space.
Give images max-width: 100% so they scale down to fit their container instead of overflowing.

Frequently asked questions

What is the difference between width and max-width?

width sets a target size; max-width sets a ceiling the element can stay below but never exceed. They are often combined for responsive containers.

How do I make a responsive container in CSS?

Use width: 100%; max-width: 960px; margin-inline: auto;. It fills narrow screens and caps and centers on wide ones.

What happens if width is bigger than max-width?

max-width wins. It is a hard limit, so the element will not exceed it even if width asks for more.

How do I keep text lines readable?

Cap the text container with something like max-width: 65ch. The ch unit is based on character width, so it keeps lines to a comfortable measure.

margin min-height

References