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 trialVictor Kossoski
2,317 PointsFloat 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?
4 Answers
gareth o'connor
1,755 PointsChrome 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
Treehouse TeacherI 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
2,317 PointsHi, I was using chrome, it was fine on firefox and it's fine now that I've cleared my browser cache - thank you :)
Jennifer Nordell
Treehouse TeacherVictor Kossoski glad it got sorted!
Kisha Fields
Courses Plus Student 5,350 PointsI had this same issue with Chrome, thank you guys for the help!
Sarah Skillington
688 PointsI 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
1,109 PointsIm 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;
}```