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

HTML How to Make a Website Adding Pages to a Website Add Iconography

green header on just contact page not flush with top

was doing a css lesson adding iconography and noticed that green header is all of sudden not flush with top on just this page, allowing for white space at top. Here's the code.

<!DOCTYPE> <HTML> <HEAD> TAGS ARE THERE. screen shot isn't showing them for some odd reason

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jeff Robbins | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Jeff Robbins</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" >Portfolio</a></li> <li><a href="about.html" >About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <h3> General Information</h3>
<p>I am available for weddings and Bar Mitzvahs</p> <p>Please call or use Twitter and email</p> </section> <section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:555-2000">555-2000</a></li> <li class="mail"><a href="mailto:myemail@aol.com">myemail@aol.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=sillyssoftnews">@sillyssoftnews</a></li> </ul> </section> <footer> <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a> <p>© 2015 Jeff Robbins.</p> </footer> </div> </body> </html>

Julie Myers
Julie Myers
7,627 Points

Could you post your css coding as well?

Here's the css, Julie

/***************************
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 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
}


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

.profile-photo {
  clear: both;
  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: white;
    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;
}

7 Answers

Mark Pryce
Mark Pryce
8,804 Points
gallery li {
   float: left; 
   width: 45%; 
   margin: 2.5%; 
   background-color: #f5f5f5 /*missing your ; */
   color: #bdc3c7 /*missing your ; */
}

gallery li a p {
   margin: 0; 
   padding: 5%; 
   font-size: 0.75em; 
   color: #bdc3c7 /*missing your ; */
}

Also I believe I have found your issue. it lies with your h3 tags they have a set margin of 18.*** try using this..

h3 {
   margin: 0;
}

Though I can't completely remember how the course goes make sure the tutor has called these elements h3 also, if he has then he should cover the fixing of this margin soon so just double check and don't get to far ahead of yourself.

Hope the head scratching can stop now. Happy coding.

Edit: for future debugging reference use Google development tools it can show you what's affecting certain parts of your page and it's showing me that a default margin is set to h3 .. don't know why though lol.

Julie is right also you are not declaring your Id and class selectors. At least not in your case you've pasted.

/* if gallery is a class it should be */
.gallery
/*wrapper should be*/
#wrapper
/* your logo should be */
#logo
Maximillian Fox
PLUS
Maximillian Fox
Courses Plus Student 9,236 Points

You are missing your opening HTML tags, your head tags, and your opening body tag :)

Nah, they are there. for some reason, it got cut off in the screen shot

Maximillian Fox
Maximillian Fox
Courses Plus Student 9,236 Points

Can you send the update of your code (just edit it and re-add the HTML in) and I will take a look.

when i went to edit question to see hy opening tags were not showing up in pic, they were all there in code. here you go.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jeff Robbins | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Jeff Robbins</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" >Portfolio</a></li> <li><a href="about.html" >About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <h3> General Information</h3>
<p>I am available for weddings and Bar Mitzvahs</p> <p>Please call or use Twitter and email</p> </section> <section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:555-2000">555-2000</a></li> <li class="mail"><a href="mailto:myemail@aol.com">myemail@aol.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=sillyssoftnews">@sillyssoftnews</a></li> </ul> </section> <footer> <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a> <p>© 2015 Jeff Robbins.</p> </footer> </div> </body> </html>

screenshot keeps cutting off opening tags.

Julie Myers
Julie Myers
7,627 Points

Add the following code into your body rule:

body {
   margin: 0;
}

Let me know if that worked and then I'll know for sure what the cause is.

I tried these all in main.css

first in body part-- didn't fix

then i tried it site body, green header, and also in contact page. still no luck

Julie Myers
Julie Myers
7,627 Points

When you copied you css it is missing some syntax. For example, the wrapper rule is missing the dot to say that it is a class. Is the coding you have on your computer showing the same thing? Could you redo your css so that it is in the black box? Don't use a screen shot to copy your css coding. Could you copy and paste it with your mouse?

Hi Julie,

I do not know what is wrong with Treehouse site. I have copied and pasted it a few times. The code is there when I drop it in. After it is posted, it's cutting off some of the syntax

For example, wrapper has an id tag (#), but it is not showing

Julie Myers
Julie Myers
7,627 Points

Well, as long as all of the correct coding is there that is all I need to know.

Adding margin: 0; in the body selector should have fixed the issue. Try one more thing. Comment out:

<link rel="stylesheet" href="css/normalize.css">. 

It might not be working right. Then add margin:0; in the body selector again. Let me know if that works. If it doesn't, then I'm not sure.

The only other thing I can think of is you are running your code in the work space TreeHouse supplies. If that is so, copy and paste all of the coding onto your computer and see how that works. The work space can be kind of buggy.

Mark Pryce
Mark Pryce
8,804 Points

Was it flush before? I know the when you start this project that the white space was deliberate and he sorts it out in a later video.

Happy coding.

Hi Mark,

that's the weird thing. as I went along they all became flush as they're supposed to. After applying a bunch of CSS on this particular exercise, I noticed that the contact page was no longer flush, while all the other pages remained flush. This makes me think that it's an HTML issue on the contact page. However I didn't change any of the HTML. Really confounded. I appreciate you emailing me and hopefully soon I will get back to happy coding after I stop scratching my head LOL.

Mark Pryce
Mark Pryce
8,804 Points

Is it still happening? Let me get on my laptop and I'll investigate.

Is it just the contact page?

thanks a million, Mark. I fixed what you told me to fix it and it worked. I'll have to Google what Google development tools are for figuring out problems on my page in the future. Have not got that far. I've always used hashtags for ID and Dots for class, but for some reason it wasn't pasting it correctly into that box when I posted it. Even though it showed them once I pasted it, the second I hit post it wasn't showing them for some weird reason.