Hey Andreas,

Go to your main CSS stylesheet and look at the selector for "#wrapper". If it doesn't already contain "clear: both;" inside of it, add that property. That will clear the floats and should remedy that whitespace at the top of the screen.

Here is my selector:

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
  clear: both;
}

Hi Marcus,

Thanks for the help. Unfortunatley it won't work, I have tried your suggestion but nothing happens. The white space remain on top of the page.

Here is my CSS without clear: both;

/******************************** GENERAL CSS Application ********************************/

body { font-family: 'Rokkitt' , sans-serif; }

wrapper{

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

/******************************** HEADING ********************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin 0; }

h1 { font-family: 'Neuton', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/******************************** Navigation ********************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

/******************************** Footer ********************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

/******************************** Page: Portfolio ********************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7 }

/******************************** COLORS ********************************/

/* site body */ body { background-color: #fff; color: #999; }

/* green header */ header { background: #6ab47b; border-color: #599a68; }

/* navigation background on mobile divices */ nav { background: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b; }

/* navigation links */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }

Ok I have removed the titel <titel>.........</titel> and it worked. So the titel is blocking for the header to adjust to the page? But if I want to keep the titel what can I do to make it work? Or is this option not possible?

I solved it...it is my spelling ;-) in my html document I have written titel instead of title. So the problem is fixed.

BR

Andreas

Thank you Markus, your solution of "clear: both" for the wrapper worked for me too. It is strange that one would need this though as this solution is not mentioned at all in any of the videos of this course so far... Also, I really don't understand why clearing the wrapper would solve anything since the wrapper is not linked to the header... (it is a separate element)... that the wrapper does not appear to be a floated element at all and that even if it was the "clear" property apparently only "clears" the left and right side of a floated element, not the top as is the problem here with the white space above the header element... In other words your solution appears like magic to me: I have no idea why it worked...

Another solution I have found is simply to put a negative value for the top margin:

header {
  float: left;
  margin: -1% 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
} 

Your solution appears more structural so more powerful but my solution seems also to work I guess and at least I understand why... I don't really know which one is better and which I should therefore use... Any opinions?...

Thanks