---
name: layout/full-bleed-content
title: Full-Bleed Content Sections
description: Content that breaks container boundaries for visual impact.
tags: [layout, full-bleed, breaking-boundaries, premium]
source: stripe.com, apple.com, brad.co, amppz.com
---

# Full-Bleed Content

## CSS

```css
.full-bleed-section {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
```

## Anti-patterns

| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Без `overflow-x: hidden` на body | Всегда overflow hidden |
| Без `transform` | `translateX(-50%)` |
| Без container | `max-width: 1200px` |