Misi: kartu pengumuman Toko Nusantara

Toko Nusantara memasang pengumuman libur di halaman depan. Kotaknya masih menempel ke tepi layar dan teksnya melebar sampai ujung. Rapikan dengan model kotak.

Tiga keputusan di misi ini berulang di hampir setiap halaman: batas lebar, penengahan, dan jarak dalam. Properti max-width memberi batas atas tanpa memaksa lebar — di layar 1440 piksel kartu berhenti di 480 piksel, sedangkan di layar 360 piksel kartu menyusut mengikuti ruang yang tersedia. Menulis width: 480px akan memaksa lebar itu di kedua layar dan membuat halaman bisa digeser ke samping di ponsel.

Nilai margin: 0 auto berarti margin atas dan bawah 0, sedangkan margin kiri dan kanan dibagi rata oleh browser, sehingga elemen yang punya lebar berada di tengah induknya. Setelah itu padding menentukan jarak antara teks dan garis tepi kartu, dan border-radius membulatkan sudutnya.

/* Contoh dengan ukuran lain: kotak bantuan di halaman laporan */
.kotak-bantuan {
  max-width: 640px;   /* batas lebar, bukan lebar yang dipaksakan */
  margin: 0 auto;     /* sisa ruang kiri-kanan dibagi rata */
  padding: 32px;
}