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 How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Paul Calabrese
Paul Calabrese
13,516 Points
Posted by Paul Calabrese
Paul Calabrese
13,516 Points

Header Edit Question ( Stage 6: 'Styling Web Pages and Navigation')

I have been able to figure out any hurdles thus far, but I am really stuck with this one. I am trying to remove the white space at the top of my header on my site. I have followed the steps in the lesson video and saved the design and it has not filled in the gap at the top of my header as intended.

Thanks for any help!

My code is listed as pasted below:

HTML:

<header>
  <a href="index.html" id="logo">
    <h1>Paul Calabrese</h1>
    <h2>Designer</h2>
  </a>
  <nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
     </ul>
  </nav>
</header>

CSS:

/********************** General ***********************/

a { text-decoration: none; }

img { max-width: 100%; }

body { font-family: 'Oxygen', sans-serif; }

wrapper {

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

/links/ a { color: #3366ff;
}

/********** 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: 'Oxygen', 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; }

/**************** footer ****************/

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

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

/**************** colors ****************/

/blue header/ header { background: #3333cc; border-color: #0000aa; }

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

/nav background on mobile devices/ background-color: #3300cc; }

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

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

/* site body*/

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

5 Answers

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Hey Paul,

Try removing the padding and margin from your body element. Usually the body will have either one or the other, sometimes both, by default. So the elements within it won't expand to the edges of the page.

body {
    background-color: #fff;
    color: #999;
    margin: 0;
    padding: 0;
}
Paul Calabrese
Paul Calabrese
13,516 Points
Paul Calabrese
Paul Calabrese
13,516 Points

Hey,

I tried this and it did not work. Also, I tried completing the next step in the video, which is making the 'Portfolio, About, and Contact' wording next to each other rather than on top of each other and that also did not work.

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

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

I copied your code into a CodePen, and the code seems to be working fine. When I removed the margin from the body, there wasn't any more whitespace, and the Portfolio, About, and Contact links lined up correctly.

Are you using Workspaces or a text editor to write your code?

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

If you make other modifications to the code, do they appear? For instance, if you change the color of all of the links on the page, does that change show up?

Paul Calabrese
Paul Calabrese
13,516 Points
Paul Calabrese
Paul Calabrese
13,516 Points

I see where you are going with this... I cleared my cashe and it worked. Sorry, I have not had that issue with this browser until now. Thank you though, I was driving myself crazy by picking apart all of the code and going to previous videos to compare my code to the lessons.

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Paul,

I added normalize.css to your code and that seemed to take care of the problem. Put it in your html file before any other css file.

Jeff

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