Under the HERO section if you were to head to the layers, there are three layers in a container, but the container isn’t expanding. It is a small 1px line, but the elements inside are outlined normally. Thinking this could potentially fudge my content up as it looks as though my logo layers aren’t nested inside anything.
But when a box shrinks to zero pixel that’s because HTML is incapable of calculating its size. This happens when the box itself contains content that it can’t appreciate the height.
In your container, you must have elements that are something else than position default or position:relative.
When there’s fixed or absolute content in a box, the box suddenly stops to have calculated dimensions. You need to find a way, a structure, or to give the element a fixed or min/max simension.
This all makes a bit more sense now. All of my elements inside the container are fixed - so I will, from now on, add a structure/dimensions to any fixed elements. Is that right?
It doesn’t solve all the problems but it’s one way to address it. It’s one of the major issue of HTML and the reason why JS is very often used. JS can calculate dimensions of everything.