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 Build the Contact Page

Ananda Johnson
Ananda Johnson
5,771 Points
Posted by Ananda Johnson
Ananda Johnson
5,771 Points

My h3 header in the contact page "<h3> Contact Info </h3>" is at the very top of the page with no margin room how 2 fix?

My h3 header in the contact page "<h3> Contact Info </h3>" is at the very top of the page with no margin room, how would I give more space between this and the navigation at the top? I tried changing the margin settings but to no avail?

Ananda Johnson
Ananda Johnson
5,771 Points
Ananda Johnson
Ananda Johnson
5,771 Points

Sure here's my main.css: where I believe the problem lies at

/*********
 GENERAL
********/

a {
 text-decoration: none; 
}

#wrapper {
  max-width:940px;
  margin: 0 auto;
  padding: 0 5%;
}

#logo {
  text-align:center;
  margin:0;

}

a {
  color:#6ab47b;
}

img {
 max-width:100%; 
}



    /*********
  BODY
********/

  body {
 background-color:#fff;
  color:#999;
}


  /*********
 HEADING
********/

header {
  float: left;
 padding: 5px 0 0 0;
 margin: 0 0 30p 0; 
  width: 100%;

}

h1 {
   font-family: 'Fjalla One', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
  }

header {
  background: #6ab47b;
  border-color: #599a68;

}

h1, h2 {
  color:  #fff;

}

nav {

  background: #599a68;
}

nav a.selected {
 color: #32673f; 
}

nav {
  text-align:center;
  padding: 10px 0;
  margin: 20px 0 0;


}

nav a, nav a:visited{
  color: #fff; 
}

nav ul {
 margin: 0 10px;
 padding: 0;
 list-style:none;

}

nav li {
  padding: 0 5px;
 display:inline-block; 

}

  /*********
FOOTER
********/
footer {
  font-size:0.75em;
  text-align:center;
  clear: both;
  padding top:50px;
  color:#ccc;

}

.social-icon{
  width: 32px;
  height: 32px;
  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 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'); 

}

4 Answers

Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points
Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

In your code there isn't the definition of H3 tag and in header you wrote "margin: 0 0 30p 0;" with a "p" and not "px".

Heather Davies
Heather Davies
3,114 Points
Heather Davies
Heather Davies
3,114 Points

I'm having the same problem! Did you change anything else apart from the 30p to 30px?

Heather Davies
Heather Davies
3,114 Points

I put this in the header section and it seems to have worked! Not sure if its correct though.

h3 { font-size: 2em; line-height: 3em; }