Divs position relative to the wrong div

Howdy folks,

It's late and I'm hoping someone can shed some light on this overnight for me. Building a slider, it's been an epic journey of learning and mass deleting before starting again but I'm nearly there.

Here's the pen with the code for all the bits: http://codepen.io/Th3M8dH8tt3r/pen/IxBta

Basically, problem is this. There's a red div that's to simulate the space on a page as this is obviously going in pages etc. The blue div is the container for everything and then inside that there's a left arrow, then slider stuff, containing divs and viewport divs.

The issue I have is this. Everything in the blue div is spacing in relation to the red div instead of relative to the blue div like it should be. The blue div interacts with the red div as it is supposed to, set width to 90% and margin to 5% and it sits in the middle but, if you don't give it a height, instead of taking the height of the contents, it's 0. It seems the content of the blue div is straight up ignoring the blue divs existence and working with the red div.

I hope that makes sense, there's a lot of red div blue div there. Best bet is to put the code into your own editor with some images and you'll see what's going on.

I'm sure I'll see the issue in the morning but for now, I'm too tired. lol.

Thanks.