En este ejercicio práctico, observamos cómo los elementos en el navegador ocupan un espacio diferente al esperado según el diseño en Figma. Para corregir esto, identificamos el ancho del widget (615px) y lo aplicamos directamente en nuestro CSS mediante una clase personalizada en el HTML.
Creamos la clase presentación__contenido, respetando la estructura semántica del HTML, y luego la estilizamos en CSS con width: 615px. Al revisar el resultado, notamos que los elementos estaban demasiado separados, así que ajustamos el margin de 5px a 10px para mejorar la distribución visual.
También abordamos el tamaño de las fuentes, comparando lo que vemos en Figma con lo que aparece en el navegador. Para el título (H1), aplicamos font-size: 36px, y para el párrafo, font-size: 24px, asegurándonos de que ambos coincidan con el diseño original.
Este tipo de ajustes son fundamentales para lograr coherencia entre el diseño y la implementación. En el próximo paso, abordaremos el tipo de fuente para que el estilo visual sea aún más fiel al prototipo.
