¿Por qué a veces mi disposición CSS se rompe en ciertas resoluciones de pantalla?

Que tu layout (disposición) CSS se «rompa» o no se vea bien en ciertas resoluciones de pantalla es un problema habitual cuando se trabaja en diseño adaptable. Las causas pueden ser variadas, pero aquí te presento algunas de las más comunes:

1. Ausencia o insuficiencia de media queries:
   La causa más directa es no haber implementado media queries para ajustar el diseño en diferentes «breakpoints» (puntos de corte), o que los breakpoints definidos no sean los adecuados para los cambios que necesita tu contenido.
2. Uso predominante de unidades fijas (píxeles):
   Si los anchos (width), altos (height), márgenes (margin), o tamaños de fuente (font-size) de los elementos principales se definen mayormente en píxeles (px), estos no se escalarán ni se adaptarán cuando el espacio de la pantalla se reduzca, provocando desbordamientos o compresiones indeseadas. Es preferible usar unidades relativas (%, vw, vh, em, rem) y técnicas de layout flexible.
3. Contenido que desborda (Overflow):
   • Imágenes: Las imágenes con un ancho fijo mayor que el de su contenedor o la pantalla se desbordarán. Una solución común es aplicar max-width: 100%; height: auto; a las imágenes.
   • Texto largo sin saltos: Palabras muy largas, URLs o texto preformateado (<pre>) pueden no ajustarse y romper el contenedor. Propiedades como overflow-wrap: break-word; o word-break: break-all; pueden ayudar.
   • Elementos con dimensiones fijas: Si un div tiene width: 500px; y la pantalla es de 320px, se desbordará.
4. Configuración incorrecta de Flexbox o Grid:
   • En Flexbox, si los elementos no tienen permitido envolverse (el valor por defecto es flex-wrap: nowrap;) y su tamaño combinado excede el del contenedor, se desbordarán. Usar flex-wrap: wrap; puede ser necesario.
   • En Grid, una definición de columnas o filas inflexible (ej. grid-template-columns: 500px 500px;) puede causar problemas en pantallas pequeñas.
5. Uso de float sin limpiar (Clearfix):
   Si todavía utilizas la propiedad float para maquetar secciones importantes, no «limpiar» los flotantes correctamente (con un clearfix o propiedades como overflow: auto en el contenedor) puede hacer que los elementos contenedores colapsen su altura y los layouts se rompan.
6. Márgenes, paddings o bordes excesivos:
   Valores grandes para estas propiedades pueden sumar y hacer que un elemento sea más ancho de lo esperado, especialmente si box-sizing: content-box; (el valor por defecto) está activo. Usar box-sizing: border-box; es a menudo una buena práctica.
7. Conflictos de especificidad o cascada en media queries:
   A veces, las reglas definidas para una resolución pueden ser anuladas inesperadamente por otras reglas más específicas o que aparecen más tarde en el CSS.

Para diagnosticar, la mejor herramienta son las Herramientas de desarrollador de tu navegador. Inspecciona los elementos en la resolución problemática para ver qué estilos se están aplicando, qué elementos están causando el desbordamiento y cómo se están comportando tus media queries.