---
title: "Container classes"
description: "Width, margin, padding and position utilities based on the container tokens."
url: https://docs.systhema.app/reference/utilities/container
version: unreleased (main)
docs_index: https://docs.systhema.app/llms.txt
---

<!-- generated by pnpm docs:generate; do not edit -->

| Class                    | Styles                                                                                |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `w-container`            | `width: var(--container-width);`                                                      |
| `max-w-container`        | `max-width: var(--container-width);`                                                  |
| `min-w-container`        | `min-width: var(--container-width);`                                                  |
| `w-container-margin`     | `width: var(--container-margin);`                                                     |
| `max-w-container-margin` | `max-width: var(--container-margin);`                                                 |
| `min-w-container-margin` | `min-width: var(--container-margin);`                                                 |
| `mx-container`           | `margin-left: var(--container-margin);`<br>`margin-right: var(--container-margin);`   |
| `ml-container`           | `margin-left: var(--container-margin);`                                               |
| `mr-container`           | `margin-right: var(--container-margin);`                                              |
| `px-container`           | `padding-left: var(--container-margin);`<br>`padding-right: var(--container-margin);` |
| `pl-container`           | `padding-left: var(--container-margin);`                                              |
| `pr-container`           | `padding-right: var(--container-margin);`                                             |
| `left-container`         | `left: var(--container-margin);`                                                      |
| `left-container-mx`      | `left: var(--container-margin);`                                                      |
| `left-container-px`      | `left: var(--container-margin);`                                                      |
| `left-container-margin`  | `left: var(--container-margin);`                                                      |
| `right-container`        | `right: var(--container-margin);`                                                     |
| `right-container-mx`     | `right: var(--container-margin);`                                                     |
| `right-container-px`     | `right: var(--container-margin);`                                                     |
| `right-container-margin` | `right: var(--container-margin);`                                                     |