I’m about to complete the ‘How to make a website project course’ and have just added the media query to make the layout change past 480px. However, on my ‘about’ page a white gap (about 5mm tall) appears at the top of my website whenever I add float: left; to my profile photo. As soon as I delete the float, the gap above the header goes and the page is correct again. I do not know what on earth could be the problem! Here is my code from the ‘responsive’ file.

Thanks very much and l look forward to hearing what I've done wrong!

/******************************** PAGE: ABOUT ********************************/

.profile-photo { float: right; margin: 0 20px 0 20px; }

}

@media screen and (min-width:660px) {

/******************************** HEADER ********************************/ nav { background: none; float: right; font-size: 1.125em; margin-right: 0%; text-align: right; width: 45%; }

logo {

float: left; margin-left: 5%; text-align: left; width: 45%; }

h1 { font-size: 2.5em;
}

h2 { font-size: 1em; margin: 0 0 15px 0; }

header { border-bottom: 5px solid #999;

}

}