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

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

Hossam Khalifa
Hossam Khalifa
17,200 Points
Posted by Hossam Khalifa
Hossam Khalifa
17,200 Points

Code 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
Jason Anello
Courses Plus Student 94,610 Points

Hi 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
James Andrews
7,245 Points
James Andrews
James Andrews
7,245 Points

make sure that the body has no padding.