Search code examples
htmlcssz-indexgaps-in-visuals

Weird white gaps and horizontal scrolling issue

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

Solution

  • 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;