# Container
The Container component is a flexible block element designed to control the spacing and structure of a web page. It provides a default padding setup but can be customized easily with your own classes.
## Setup & Example
Start by importing the Container component from the theui-svelte library. To use the Container component with its default settings, simply include it in your Svelte template:
```html
```
## Customization
For customization, you can add your own classes to adjust the spacing, alignment, or other styles:
```html
```
The Container renders a `` element. Any other attributes you add, like `id` or `aria-label`, are passed to it directly.
## Page Width
A `Container` grows to the width of its parent and stops at `--max-width`, which is `1280px` out of the box. The [`Navbar`](https://www.theui.dev/docs/navbar) reads the same variable for its inner row, so the brand and the links line up with the content below them. Change the one variable and both follow.
It is a plain CSS custom property on `:root`, not a Tailwind theme value, so you set it in your own CSS with no `@theme` block. Your stylesheet comes after `theui-svelte/style`, so your value is the one that applies.
**./src/app.css**
```css
@import 'tailwindcss';
@import 'theui-svelte/style';
:root {
--max-width: 1400px;
}
```
Because it is inherited, you can also set it on one part of the page. Anything inside picks up the new width, and the rest of the site keeps the old one, which is how you give a single section room to breathe:
**A wider section**
```svelte
```
For a one-off, a class is simpler than the variable: `` overrides the width for that container alone, since the class comes last.
## Accessibility
`Container` renders a ``. Left unnamed, that is treated as an ordinary block and changes nothing for assistive technology, which is what you want for a container that only sets width and spacing.
Add `aria-label` or `aria-labelledby` and it becomes a region landmark, listed alongside the banner, navigation and main areas of the page. Do that for an area people may want to jump straight to, and leave the rest unnamed: a page where everything is a landmark is as hard to move around as one with none.
**A container worth naming**
```svelte
Pricing
```
A `Container` is not a replacement for the landmarks a page needs anyway. Keep your ``, `