Footer has a gap and navbar not displaying properly

[Rawad]

I seem to be having 3 issues, the first one is with the navbar, everytime I float the links to the left, the navbar background disappears unless I give it a min-height. I don’t think you need a min-height for a navbar, it just does it for you . what’s with that white gap after the header?

My other issue is that, underneath the footer, their is a huge white gap. I have no idea why my code is doing this, help would be appreciated.

http://codepen.io/anon/pen/xwqaKG

[Beverleyh]

floated elements need to be cleared in order to counteract collapsed containers, so look in to using a clearfix – which can sometimes be as simple as setting overflow:hidden; on the container (in this case the ul).

The gap under the footer might be because of default margins on the paragraph tag within it. Zero those and it should remove the gap.

Gap under the banner img? Not sure – I’m on mobile so unfortunately can’t do much investigation. Hopefully someone else can step in with suggestions.

[Rawad]

@Beverleyh Thank you very much, that fixed my footer problem, If you view the website on desktop, you will see a gap under the banner, I have no idea why though.

[Author]

Posts