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