I’m trying to wrap up the entire page in a wrapper. However, when I apply background-color it does nothing even though other properties (margin, width) work on it. Also when I apply background color to the <body> element, it completely overwrites the wrapper background, I tried to solve it with z-index but it also doesn’t work. Any ideas what is happening here and why?
HTML looks like below
<--! rest of the content -->
font-family: "Lato", sans-serif;
margin: 0 auto;
/* --- does not work --- */
So, I think it is working, we just can’t see it. For example, if I add border: 10px solid red; to the “wrapper”, I see:
Notice the little red there hidden by the banner?
That tells me that:
Changes we make to it are being reflected.
It has 0 height so we can’t see it.
Why does it have 0 height. Imagine we had a plastic bag. When there is nothing in it, it is flat. It won’t expand until we put something in it.
You do have things in them, but a lot of them you seem to be giving things like position: fixed and position: absolute which are messing with the flow of the DOM. So, that div is not taking up any vertical space because there is nothing in there requiring vertical space.