Solucionado
Si usamos el mismo css style para dos html teniendo en cuenta que al primer html productos al manipular el main usamos class y ahora en el html contactos para manipular el main usamos directamente el main, como sabemos que al usar directamente el nombre de la etiqueta tiene más nivel de importancia que él, id y class, no se está afectando al html producto.
La especificidad en CSS es un grupo de reglas aplicadas a los selectores CSS para determinar qué estilo se aplica a un elemento. Cuanto más específico sea un selector, mayor será su valor en puntos y más probable será que esté presente en el estilo del elemento.
Jerarquía de la especificidad
Mayor especificidad ---->** Estilo en Linea ---> ID ----> Clases, atributos y pseudoclases ----> Elementos, pseudoelementos** <--- Menos especificidad.
Para mas detalles, ingresa aqui: https://dev.to/lupitacode/especificidad-en-css-que-es-y-como-funciona-52k6
hola Aldo, recuerdas en el curso de js como se ejecuta el código en orden. o sea la primera línea se ejecuta primero y así. pasa mas o menos lo mismo con css. lo último que vas escribiendo pesa un poquito más que lo anterior. ejemplo. si en la línea 2 dices esto:
<main class="bg-color">
</main>
<style>
main { background:red }
</style>y luego en la línea 5 pones esto
<style>
.bg-color { background:green }
</styleva a tomarte el color verde porque estas sobrescribiendo la linea 2. y si usas propiedades diferentes va a tomar las 2. si quieres un estilo de main diferente en cada html yo te recomiendo que lo hagas todo con clases. :) espero haberte ayudado un