CSS Max-width
Using max-width instead of width in many situations will improve the browser's handling of small windows. This is important when making a site usable on small devices.
The Problem with width
If you set the width of a block-level element, it will prevent the browser from shrinking the element on smaller screens. The browser will add a horizontal scrollbar to the page, which is bad for user experience.
Using max-width
The max-width property sets the maximum width of an element. The element will take up the specified width, but it can shrink on smaller screens. This makes it a key tool for responsive design.
Example
.container {
max-width: 800px;
margin: auto; /* This centers the container */
}In this example, the container will be at most 800px wide. On screens smaller than 800px, it will shrink to fit, preventing horizontal scrolling.
Test Yourself with an Exercise
How can you center a block element with a set max-width?