<?xml version="1.0" encoding="utf-8"?>

CSS max-width property

By default, if not specified, a block-level element will fill in the page horizontally. But what if you don't want this element to stretch forever on bigger screens? The max-width property allows you to set the maximum possible width of the element.

For example, adding the declaration max-width: 200px; to a section will ensure that it won't stretch longer than 200px horizontally, even on a wider screen. If the content is larger than the maximum width, it will expand down, extending the element's height to fit it all.

Pro Tip: The max-width property overrides the width property — an element cannot be wider than the max-width value.

Improve your UX & Product skills with interactive courses that actually work