Inner div width/height to 100% body size not parent div with side JS

Question

I have a base layer on top of which I have more multiple layers. On my second layer, I want its width to stretch out to the width of the body.

Main Project:

http://jsfiddle.net/ygXy6/694/

What I've tried:

I searched into: Make div inside parent 100% width of body, not parent div

This Does work: http://jsfiddle.net/ygXy6/18/

But doesn't work with my project, probably due to my parallax JS, this is my outcome when I apply the above method: https://jsfiddle.net/epkevxps/

I also tried using vw as one of the width units which leads me to think that i need to change my JS rather than CSS

My desired outcome would be for layer two to be 100% in width and layer three at 100% height: like this static example

Answer 1

https://jsfiddle.net/mcxwnwy3/

I suggest you start fiddling with vh and vw . A better solution would be to make all elements siblings and use the z-index property instead of nesting them. That way you can use % for all elements.