Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Victor Kossoski
Victor Kossoski
2,317 Points
Posted by Victor Kossoski
Victor Kossoski
2,317 Points

Float to the left but white space remains above the header

Followed the instructions but the white space above the header remains. Any ideas where I have gone wrong?

https://w.trhou.se/sgvj7qv4bb

4 Answers

gareth o'connor
gareth o'connor
1,755 Points
gareth o'connor
gareth o'connor
1,755 Points

Chrome can be a pain for testing due to persistent caching. You can disable it by going to Developer Tools/Network and check the 'disable caching' checkbox!

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I took the liberty of forking your workspace and taking a look around. But, I don't see a white space above the header. The green part is flush to the top in my browser. I've looked in Edge and Firefox. What happens if you try clearing your browser cache and reloading the preview/refreshing?

Victor Kossoski
Victor Kossoski
2,317 Points
Victor Kossoski
Victor Kossoski
2,317 Points

Hi, I was using chrome, it was fine on firefox and it's fine now that I've cleared my browser cache - thank you :)

Kisha Fields
PLUS
Kisha Fields
Courses Plus Student 5,350 Points
Kisha Fields
Kisha Fields
Courses Plus Student 5,350 Points

I had this same issue with Chrome, thank you guys for the help!

Sarah Skillington
Sarah Skillington
688 Points
Sarah Skillington
Sarah Skillington
688 Points

I had the same issue even after disabling the Chrome cache, but I realized it was because lower down in the code under /COLORS/ section there was a margin set to my header, so it was overriding the margin properties that we had typed in this video.

Just in case anyone else was having the same problem.

Diane Ancheril
Diane Ancheril
1,109 Points

Im using a Mac. I emptied the cache but the white space still remains. Any suggestions?

GENERAL
*************/

#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: 'Open Sans', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}


/************
NAVIGATION
*************/

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


/************
FOOTER
*************/

footer {
    font-size: 0.75em;
    text-align: center;
    clear: both; /*is not included in float styling in either the left or right*/ 
    padding-top: 50px;
    color: #ccc;
}


/************
PAGE: PORTFOLIO
*************/

#gallery {
  padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #888; /* Ensures that the color of the unlinked text is gray*/
}

#gallery li a p{
    margin:0;
    padding: 5%;
    font-size: 0.75em;
    color: #888;/* Color stays gray even if it is linked*/
}
/************
COLORS
*************/

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

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

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

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

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


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

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