Weird white gaps and horizontal scrolling issue

Question

It seems I'm having an issue with a design I'm working on. I'm using the kickstart HTML framework but I have a couple issues.

Firstly is that there is a very large white gap between the top of my page (logo, navbar) and the text.

Secondly I've tried to overlay the logo over the the navbar by using z-index. However it causes a negative horizontal scroll. I've tried to hide it by hiding overflow-x but it just doesn't seem like the best solution.

You can see the issues at http://jkr.me.uk/problem.html

Thanks,

John

Answer 1

Using position: relative on the logo makes it take up space that you're refferring to.

Instead, use float: right, or position it with position: absolute;

Answer 2

The issue with the white gap is the image. If you disable the position:relative property the image bottom will be touching the top margin of the fist header tag. A dirty fix for this would be something like margin-top: -200px on the first header or alternatively margin-bottom: -200px on the logo image. You could also use the method from the previous answerer.

As for the logo image overlaying the navbar, it does for me in both Chrome and IE 9.