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

CSS

Posted by Josiah Anderson
Josiah Anderson
743 Points

Having Trouble with spacing on top of page.

I can't seem to get the spacing right on the top of the page for the contact.html page. There is a white space of about 20px at the top that I cannot figure out how to get rid of. I've checked the code and my code looks just the same as NIck's code. Anyone have any pointers on how to get rid of this white space? Also the space between the nav and the first section is all scrunched. Adding padding or margins doesn't seem to help. This happened to me on the about page as well but I just added padding-top to the .profile-photo class to fix it.

Here is my code, both html and CSS:

html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Josiah Anderson | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Dosis:400,700,800|Open+Sans:400,700,700italic,800,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id ="logo">
        <h1>Josiah Anderson</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 currently looking for work but only have very basic skills. Would not charge much if anything. If you are a non-profit, I would love to donate a site!</p>
        <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p>
      </section>
      <section>
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li class="mail"><a href-"mailto:josiah@example.com">Josiahdanderson@gmail.com</a></li>
          <li class="twitter"><a href="https://twitter.com/intent/tweet?screen_name=josiahdanderson">
            josiahdanderson</a></li>
        </ul>
      </section>
      <footer>
        <a href="https://www.twitter.com/josiahdanderson"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://www.facebook.com/jesusfreak.follower"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Josiah Anderson.</p>
      </footer>
    </div>
  </body>
</html>

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: Dosis, sans-serif;
  margin: 15px 0px;
  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 {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  padding: 20px 0; 
  border-radius: 100%;
}


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

2 Answers

Lorraine Wheat
Lorraine Wheat
6,083 Points

Use a universal selector and make margin and padding 0.

*{ margin: 0; padding: 0; }

Then add margin and padding to the individual selectors.

JORGE HERRANDO GARIJO
JORGE HERRANDO GARIJO
7,895 Points
JORGE HERRANDO GARIJO
JORGE HERRANDO GARIJO
7,895 Points

I think the problem here is the margin applied by default to the h1 element. Since you are using normalize.css the body element doesn't have a margin but h1 still has it.