Todo elemento ocupa una caja

width fija un ancho y max-width establece un límite sin impedir que la caja se reduzca. Un bloque limitado puede centrarse con margin-left: auto y margin-right: auto.

El contenido queda rodeado por padding, border y margin. border-radius redondea las esquinas sin cambiar la estructura.

Con box-sizing: border-box, el ancho declarado incluye padding y borde; suele ser una base más predecible.

Modelo de caja

.card {
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid #d1d5db;
  margin-block: 16px;
}