---
id: seed:conventions/html-container-rule
title: HTML container rule (MANDATORY)
source_type: seed_convention
priority: hot
---

Every `<section data-amb-section="...">` in Antimanual Builder MUST have a single direct child element with the literal class `container`. All other wrappers go INSIDE that container.

**Correct:**

```html
<section data-amb-section="features" class="features-section">
  <div class="container">
    <div class="features-grid">
      <!-- card markup -->
    </div>
  </div>
</section>
```

**Wrong — DO NOT do any of these:**

```html
<!-- Wrong: section-specific wrapper instead of .container -->
<section data-amb-section="features" class="features-section">
  <div class="features-container">…</div>
</section>

<!-- Wrong: prefixed container class -->
<section data-amb-section="hero" class="hero-section">
  <div class="hero-container">…</div>
</section>

<!-- Wrong: no container at all -->
<section data-amb-section="cta" class="cta-section">
  <h2>…</h2>
  <a class="cta-button">…</a>
</section>
```

**Why it matters:**

- A single global `.container { max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; }` rule applies uniformly site-wide.
- The builder's frontend stylesheets target `.container` for responsive padding adjustments at breakpoints.
- The `is-full-width` body class (set by the Full-Width page template) selectively overrides `.container` to go edge-to-edge — only works when the class name is consistent.

**Class names INSIDE the container:** use section-specific descriptive classes (`features-grid`, `pricing-cards`, `hero-content`, `cta-actions`). These NEVER replace `.container`; they nest inside it.

**Exception:** there is no exception. The container class is always the literal word `container`, never prefixed, never substituted, never omitted. If a section needs to be visually edge-to-edge, target `body.is-full-width .container { max-width: none; padding-inline: 0; }` — don't change the markup.
