There is too much space between my header and my posts on my blog (blogspot).

Question

http://booksandloafers.blogspot.co.uk/

As you see, underneath the search bar there is a gap before posts start. My layout is from a template, and the gap was created when I removed some gadgets from that area.

I would like to know if there is anyway I can remove this space without having to put those gadgets back in?

I am for sure a HTML novice, but I've tried other suggestions such as 'overflow: hidden;' but I have not found anywhere that worked. Any advice would be helpful! :)

Answer 1

Remove height from banner id

Change

    #banner {
    height: 300px;
    margin-bottom: 30px;
    margin-top: 20px;
    width: 940px;
}

to

#banner {
margin-bottom: 30px;
margin-top: 20px;
width: 940px;

}

Answer 2

When working with HTML/CSS, I prefer to use the "inspect element" feature when working in Firefox/Chrome.

It allows me to noodle around with a problem without saving my work, so that I can figure out what's causing my problem(s).

In your case, #banner has a height of 300px, which is causing your current problem. Remove it from your CSS and things should look normal.