Container
Also called max-width container, content wrapper, or page container
A wrapper that caps content at a maximum width and centers it, so lines stay readable on wide screens and keep padding on small ones.
// One width for every section, so content lines up on the same edges.
const CONTAINER = 'mx-auto max-w-[1200px] px-4 sm:px-6';
export function ReleaseNotes() {
return (
<>
{/* The background runs edge to edge; the content stays in the container. */}
<section className='bg-muted py-16'>
<div className={CONTAINER}>
<h1 className='text-4xl font-bold tracking-tight'>Release notes</h1>
</div>
</section>
<section className={`${CONTAINER} py-12`}>
{/* About 65 characters per line reads comfortably. */}
<article className='max-w-[65ch] space-y-4 leading-relaxed'>
<h2 className='text-xl font-semibold'>Custom domains</h2>
<p>
You can now publish any project to a domain you own. Add the domain
in project settings, point its DNS records at us, and we issue the
certificate for you.
</p>
</article>
</section>
</>
);
}Wrap every page section in a centered container with a max-width of 1200px, margin-inline: auto, and 24px side padding (16px under 640px). Inside it, use a 12-column grid with a 24px gap, and let section backgrounds run the full width while the content stays in the container.
Paste into Layerwise or any AI coding tool.
What is Container?
A container is the invisible box most websites put their content in. It has a max-width (often 1200 to 1280px), margin-inline: auto to center it, and side padding so content never touches the screen edge on phones. As the window grows wider than the max width, the empty space on both sides grows while the content stays put.
Without one, lines of text stretch across a wide monitor and become hard to read, and parts of the page drift apart. Use one container width across the site so the logo, headings, and footer line up on the same edges. A section’s background can still run the full width of the screen while its content sits in the container.
For long-form text, a narrower measure of about 65 characters (max-width: 65ch) reads more comfortably. Tailwind has a container class that snaps its max width to each breakpoint; many projects use mx-auto max-w-6xl px-6 instead to get one fixed width.
Related terms
All termsResponsive design
Designing one layout that adapts to any screen width, rearranging columns, sizes, and navigation at set widths called breakpoints.
CSS Grid
A CSS layout system that places items on rows and columns at once, so content lines up in both directions.
Padding vs margin
Padding is the space inside an element’s border, around its content, while margin is the space outside the border that pushes other elements away.
Hero section
The large first section at the top of a landing page, with a headline, a short subhead, a call to action, and a visual.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.
