Header and Navigation problems

Question

I didn't find any solution for my problems in the previous questions/answers concerning a common problem we seems to face during this step.

I still have a white space on my nav section, so only the selected item is shown. The header seems to have a weird height too.

Also, when I added the h1 and h2 rule in the responsive.css, the header and nav disappear completly. so I deleted it in order to fix the previous issue first.

Here is my main.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%;
}

h3 [
  margin: 0 0 1em 0;
]



/************************
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 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.75sem;
  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
}



/************************
PAGE: ABOUT
************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}


/************************
PAGE: CONTACT
************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;  
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}


.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}



/************************
COLORS
************************/



/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;  
}

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}


/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

responsive.css

@media screen and (min-width: 480px) {

 /************************
  TWO COLUMN LAYOUT
  ************************/

  #primary {
    width: 50%;
    float: left;  
  }

  #secondary {
    width: 40%;
    float: right;
  }



  /************************
  PAGE: PORTFOLIO
  ************************/

    #gallery li {
      width: 28.3333%;
  }

    #gallery li:nth-child(4n) {
      clear: left;
  }



 /************************
  PAGE: ABOUT
  ***********************/

    .profile-photo {
      float: left;
      margin: 0 5% 80px 0;
    }

}

@media screen and (min-width: 660px) {

 /************************
  PAGE: HEADER
  ************************/

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }

 }

Answer 1 · 2014-12-01T19:40:44Z

December 1, 2014 7:40pm

This is a common issue that comes up quite a lot.

Each element has it's own default styling which includes padding and margins. This is probably whats causing the gaps on your page. i.e. the whitespace

You should be able to blot this out by doing

* {
margin: 0;
padding: 0;
}

But if that doesn't work you'll have to do a bit of detective work to work out which element is causing the excess margin/padding to appear.

You can do this by looking at your browser element inspector.

In Chrome you can open this using ctrl+shift+j In Firefox you can open this in ctrl+shift+k

Once opened you can see a representation of the Box model. The margin, the padding and the element size. See exactly what was happening in your document.

Heading elements are the mostly likely culprits. So start by looking at those. Once you've got rid of all the padding you could see the whitespace disappear.

Hope this is helps. :)

Answer 2 · 2014-12-02T02:53:42Z

December 2, 2014 2:53am

Thank you for your help! But I didn't manage to fix my issue at the moment, so I decided to restart the responsive.css from the start to find where the error happens. I will do it tommorow.

Thank you for the cue of the browser element inspector! I didn't know this feature. But as I'm really really newbie in web programming, I don't know what exactly I should look for in that box...

My margin and padding were already both set to 0;

Welcome to the Treehouse Community

Looking to learn something new?

Nicolas Dubé

Nicolas Dubé

Header and Navigation problems

2 Answers

Jonathan Grieve

Jonathan Grieve

Nicolas Dubé

Nicolas Dubé

Jonathan Grieve

Jonathan Grieve