این تکنیک یکی از الگوهای پرکاربرد در طراحی وب مدرن است: پس‌زمینه‌ها از چپ تا راست مرورگر کشیده می‌شوند، اما محتوای داخلی در یک عرض مشخص و خوانا باقی می‌ماند.

---

🧱 مراحل پیاده‌سازی

1. حذف container کلی

در نسخه‌ی اولیه، همه‌ی محتوا داخل یک <div class="container"> قرار داشت و پس‌زمینه‌ی سفید فقط وسط صفحه دیده می‌شد.
با حذف این container، پس‌زمینه‌ی اصلی صفحه (مثلاً سبز) تمام‌عرض نمایش داده می‌شود.

body {
  margin: 0;
  padding: 0;
  background-color: #617140; /* رنگ کلی صفحه */
}

---

2. تعیین رنگ پس‌زمینه برای بخش‌ها

هر بخش باید رنگ پس‌زمینه‌ی خودش را داشته باشد:

header {
  background-color: #617140;
  color: white;
}

header a {
  color: white;
}

.main-content {
  background-color: white;
}

---

3. بازگرداندن container داخلی

برای محدود کردن عرض متن و منو، داخل هر بخش یک container جدید اضافه می‌کنیم:

<header>
  <div class="container">
    <h1>عنوان سایت</h1>
    <nav class="site-nav">...</nav>
  </div>
</header>

<main class="main-content">
  <div class="container">
    <p>این متن نمونه است...</p>
  </div>
</main>

و در CSS:

.container {
  max-width: 940px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

---

📌 چرا max-width؟

• استفاده از max-width به‌جای width باعث می‌شود چیدمان واکنش‌گرا باقی بماند.
• در نمایشگرهای کوچک‌تر، محتوا به‌طور طبیعی جمع می‌شود و اسکرول افقی ایجاد نمی‌شود.
• با افزودن padding داخلی، متن از لبه‌ها فاصله می‌گیرد و خوانایی حفظ می‌شود.

---

🎯 جمع‌بندی

• با حذف container کلی، پس‌زمینه‌ها تمام‌عرض شدند.
• با افزودن container داخلی، محتوای هر بخش عرض ثابت و منظم گرفت.
• با padding، در صفحه‌های کوچک هم فاصله‌ی مناسب از لبه‌ها ایجاد شد.