El calculo del porcentaje % es heredado directamente del HTML o de mi padre directo?

Hola Williamgb, cuando le dices a un contenedor que tenga un width: 100% este tomara el ancho de su contenedor padre , si lo hay, y si no hay entonces lo tomara de elemento body. Ejemplo:

HTML

<main class="container-padre"> <div class="caja-hijo"><d/iv> </main>

CSS .container-padre { width: 100%; } ← normalmente a la etiqueta main no la contiene ninguna otra etiqueta , solo body, osea el padre de main es body. Entonces si a body no le has especificado algun ancho este normalmente tomara el 100% del viewport y por consecuencia en este ejemplo main tendra el ancho que tenga body.

ejemplo2

.caja-hijo { width: 80% } ← en este ejemplo este elemento tendra un ancho del 80% de su elemento padre que es .container-padre y no de body porque este elemento es hijo de un contenedor.

Espero haberme hecho entender y haberte ayudado.

Saludos ✌