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 trialHossam Khalifa
17,200 PointsCode dosent work
/*****************************************
General
*****************************************/
body{
font-family: 'Open Sans', sans-serif;
}
#wrapper{
max-width:940px;
margin:50px auto;
padding:0 5%;
}
img {
max-width:100%;
}
/*****************************************
Header
*****************************************/
header{
float:left;
margin:0 0 30px 0;
padding:5px 0 0 0;
width:100%;
background:#6ab47b;
border-color:#599a68;
}
#logo{
text-align:center;
margin:0;
}
/* logo text*/
h1, h2{
color:#fff;
}
h1{
font-family: 'Changa One', sans-serif;
margin: 15px 0;
font-size:1.75em;
font-weight:normal;
line-height:0.8em;
}
h2{
font-size:1em;
font-family: 'Damion', cursive;
margin:-5px 0 0;
font-weight:normal;
}
/*****************************************
Navigation
*****************************************/
nav{
text-align:center;
padding:10px 0;
margin:20px 0 0 ;
}
/*****************************************
Footer
*****************************************/
footer{
font-size:0.75em;
text-align:center;
padding-top:50px;
color:#ccc;
clear:both;
}
/*****************************************
Page Portfolio home
*****************************************/
#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;
}
/* nav backround on mobile devicecs*/
nav{
background:#599a68;
}
/* color for nav link*/
nav a,nav a:visited{
color:#fff;
}
/* selected nav link */
nav a.selected, nav a:hover{
color:#32673f;
}
/* a color green*/
a{
text-decoration:none;
color:#6ab47b;
}
The header should be in the very top and the white space should disappear but it doesnt work.
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Hossam,
Does your gap look like it's about 50px?
I think that you must have accidentally set the top and bottom margins of your #wrapper
div to 50px instead of 0
#wrapper{
max-width:940px;
margin:50px auto; /* Should be margin: 0 auto; */
padding:0 5%;
}
This has the effect of putting a 50px gap above the header. The reason this happens is because the floated header isn't cleared by the following element which is your wrapper div. Because of this the content box for the wrapper div extends all the way to the top of the header. The section
element as well as the first child of the section
element also have their content boxes extending to the top of the header. Putting a top margin on any 3 of these elements will produce a gap above the header.
The solution is to have your wrapper div clear the floated header. Then its content box will drop below the header.
#wrapper{
clear: both;
max-width:940px;
margin:0 auto;
padding:0 5%;
}
James Andrews
7,245 Pointsmake sure that the body has no padding.