Space between top of page and header

Question

I am attempting to finish my header, but there is a massive space between the top of the page and the header. I would like to keep my image in place but the header at top but the same size. Here is my code:

HTML

<div id="header_logo-clearfix">
    <div id="header_logo"><a href="file:///C:/Users/Swag/Desktop/My%20Website/Home/home.html"><div id="logo"><img src="Header/banner.png" alt="Logo" align="middle" width="300"height="100"></a>
    </div>
</div>

CSS

 #header_logo-clearfix {
    width: 100%;
    height: 180px;
    margin: 0;
    padding: 0;
    display: block;
    background-color: #02236a;
}

#header_logo {
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    margin-top: 40px;
}

JSFiddle.

IF you only formatted your HTML properly.... – Roko C. Buljan Apr 06 '15 at 09:20 — Roko C. Buljan, Apr 06 '15 at 09:20

ketan · Accepted Answer · 2015-04-06T09:23:04.753

1

It is because of #header_logo { has margin-top: 40px; Just remove it will solve your issue.

Edit:

Add padding-top:40px; instead will down your image.

Check Fiddle.

New updated CSS:

#header_logo-clearfix {
  width: 100%;
  height: 180px;
  margin: 0;
  padding: 0;
  display: block;
  background-color: #02236a;
}

#header_logo {
  margin-left: auto;
  margin-right: auto;
  width: 20%;
    padding-top: 40px;
}

edited Apr 06 '15 at 09:23

answered Apr 06 '15 at 09:18

ketan

19,129
42
60
98

It made the background go up, then how do I move the image down? – ieblake Apr 06 '15 at 09:19
Give `padding-top: 40px;`. – ketan Apr 06 '15 at 09:21
1

thanks @ketan , I'll mark it as correct in 3 minutes lol – ieblake Apr 06 '15 at 09:28

score 0 · Answer 2 · answered Apr 06 '15 at 09:19

You have a missing <div> tag here

<div id="logo"><img src="Header/banner.png" alt="Logo" align="middle" width="300"height="100">

The div with id "logo" does not have a corresponding end tag. I am not sure if that will fix the issue but it can definitely give you unexpected behavior in lower end browsers that are not capable of auto matching missing HTML tags.

score 0 · Answer 3 · answered Apr 06 '15 at 09:22

0

Remove the marrgin-top: 40px from #header_logo class

check thisfiddle

answered Apr 06 '15 at 09:22

Jackson

149
6

this was already answered 3 min ago... – Roko C. Buljan Apr 06 '15 at 09:22
i was not aware when he was posting the answer .... :| – Jackson Apr 06 '15 at 09:23

Space between top of page and header

3 Answers3