Mission 7: Container

เป้าหมายของ Mission นี้: จำกัดความกว้างเนื้อหาและจัดกึ่งกลางด้วย max-width + margin: auto

แพทเทิร์น "container"

เว็บไซต์เกือบทุกเว็บมีกล่องนอกสุดที่จำกัดความกว้างสูงสุด แล้ววางกึ่งกลางหน้าจอ เพื่อไม่ให้เนื้อหายืดกว้างเกินไปบนจอใหญ่ — ทำได้ด้วย max-width (จำกัดกว้าง สูงสุด) คู่กับ margin: 0 auto; (บน-ล่างไม่มี, ซ้าย-ขวา auto = ดันให้อยู่กึ่งกลาง)

Demo

.page-container {
  max-width: 72rem;
  margin: 0 auto;
}