Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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%;
}

make sure that the body has no padding.