CSS Max Width

The max-width property sets the maximum width of an element. This is one of the most important tools for creating responsive web designs that work on both large desktops and small mobile phones.

Max-Width vs. Width

When you use width: 500px;, the element will stay 500px even if the browser window is only 300px wide (creating a horizontal scrollbar). However, if you use max-width: 500px;, the element will shrink to fit small screens but never grow larger than 500px on big screens.

/* Comparison */
.box-fixed { width: 500px; }

.box-responsive {
    max-width: 500px;
    width: 100%; /* Important fallback */
}

Centering Elements

The most common way to center a main container on a website is to combine max-width with margin: auto.

.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

Using Max-Width for Images

To ensure images never overflow their container and remain responsive, use the following standard rule:

img {
    max-width: 100%;
    height: auto; /* Maintains aspect ratio */
}