Header background colour extends past navigation

Question

Hello,
I'm not sure why, but the header background colour on my project extends a fair bit below my navigation, where as I see Nick's is flush. I have been following along, and can't seem to see where I'm going wrong.
Thanks!

Laura Cressman · Accepted Answer

The issue is in your nav part-your margin property and values say margin: 20px 0, but to get rid of that bottom margin on the nav (the extra green stuff), you need an extra zero, so it says margin: 20px 0 0. Here is the code pen (ignore the bottom part, but the nav part is good) http://codepen.io/anon/pen/xqlpa/. Since you had just margin: 20px 0, that sets the top AND bottom margins to 20px, and the left and right margins to zero. The extra bottom margin you're seeing is from a 20px bottom margin being applied. When you say margin: 20px 0 0, that sets the top margin to 20px, the left and right margins to 0, and the bottom margin to 0. Hope this helps!

Jason Goertzen · Answer

Hi Laura. Thanks for the reply and thanks for you help!
Here is my css:
/********************************
GENERAL
**********************************/
body {
  font-family: 'Open Sans', sans-serif;
}
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:'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}
h2 {
 font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}
/********************************
NAVIGATION
**********************************/
nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0;
}
nav ul {
 list-style: none;
  margin: 0 10px;
  padding: 0;
}
nav li {
 display: inline-block;
}
nav a {
 font-weight: 800;
  padding: 15px 10px;
}
/********************************
FOOTER
**********************************/
footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}
.social-icon {
 width: 20px;
  height: 20px;
  margin: 0 5px;
}
/********************************
PAGE PORTFOLIO
**********************************/
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;
}
/********************************
COLOURS
**********************************/
/* 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; 
}
/link/
a {
  color: #6ab47b; 
}
/* nav link /
nav a, nav a:visited {
 color: #fff; 
}
/ selected nav link */
nav a.selected, nav a:hover {
 color:  #32673f; 
}

Laura Cressman · Answer

Hi Jason,
I'm not sure what your code looks like, but perhaps it could be related to the height property of your header? If you post your code I might be able to help you better :)

Welcome to the Treehouse Community

Looking to learn something new?

Jason Goertzen

Jason Goertzen

Header background colour extends past navigation

3 Answers

Laura Cressman

Laura Cressman

Jason Goertzen

Jason Goertzen

Laura Cressman

Laura Cressman

Jason Goertzen

Jason Goertzen

wrapper {

logo {

gallery {

gallery li {

gallery li a p {