Container
When you add elements on your page, you'll notice most of the content spans the full width of the screen. Instead of having to style each element to keep content centered, you can drop elements in a Container to keep them neatly contained in the center of your page.
Video transcript
The Container element in Webflow is a structural element that centers your content horizontally and sets a maximum width, keeping your layout from stretching too wide on large screens. It's one of the most commonly used elements in Webflow and a foundational building block for most page layouts.
By default, a Container has a max-width of 940px and is horizontally centered on the page. You can change these values in the Style panel to match your design's requirements. Many sites use containers with max-widths between 960px and 1440px depending on their layout needs.
Containers are typically placed inside a Section element. The Section creates the vertical structure and full-width background, while the Container inside it limits the width of the content and keeps it centered. This Section → Container → Content structure is a common pattern you'll see across most Webflow sites.
You can also use a Container inside a Grid or Flexbox layout to constrain nested content. And if you need different max-width constraints in different parts of your layout, you can create multiple Container classes with different values.
One thing to note: a Container is a semantic-free div with a max-width and auto margins. If you want more layout control, you can achieve the same effect with a regular Div block styled with max-width and margin: auto. The Container element just gives you that setup out of the box.
