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

ERNESTO ESPARZA
ERNESTO ESPARZA
1,312 Points

I set the "header" as margin: 0 0 10px 0; but the small white portion on the "header" does not desapear, why ?

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

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

hard to say without seeing more. just a thought, could be your html....

one trick people do sometimes looks like this

<li
><li
><li>

so your closing "greater-than" eliminates spaces inserted by the html which, if there are 12, are evaluated to one space. Again, without seeing more or what your white space is... where it is in relation to the header. It's hard to help.

ERNESTO ESPARZA
ERNESTO ESPARZA
1,312 Points

Hello Timothy, thanks for your suport !!

I check my HTML and all seems ok... so far...

So far this is all I have :( ...

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Training web page</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/maincss.css"> </head> <body> <header> <a href="index.html"> <h1>ErnestoΒ΄s Web page training</h1> <h2>Master Gallery</h2> <h3>Please select a picture for detail information</h3> </a> </header> <section> <ul> <li> <p>cars pictures</p> <img src="main_pics/cars.jpg" alt=""> </li>

            <li>
                <p>House picutures</p>
                <img src="main_pics/house.jpg" alt="">
            </li>

            <li>
                <p>Dogs pictures</p>
                <img src="main_pics/dog.jpg" alt="">
            </li>
        </ul>
    </section>
    <footer></footer>
</body>

</html>

.css file

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

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

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

a{ text-decoration: none;
}

3 Answers

Damien Watson
Damien Watson
27,419 Points

Hi Ernesto,

I think the white space you're referring to is actually a margin set on the page body, not the header, so try adding this to your css:

body   {
  margin:0;
  padding:0;
}
ERNESTO ESPARZA
ERNESTO ESPARZA
1,312 Points

Hello Damien

Thanks for helping, you were right, the "body" was related, but I had to add more code to fix the problem:

body{ float: left; margin: 0; padding: 0; width: 100%; }

Your comment was a lot of help this issue, thanks for supporting on this item !

Damien Watson
Damien Watson
27,419 Points

Hey Ernesto, Glad to hear you have it fixed, though now I'm curious. The body width is 100% wide by default and you shouldn't have to float it.

The reason that the space is appearing at the top is because the header has 'float:left;'. 'float' wraps the container around the contents which means you have to then set 'width:100%' to force it back out. The 'header' is 100% wide by default anyway, so you could simplify these two lines by writing the below. Especially if you want your header to be 100% wide.

body { margin:0; padding:0; }
header { margin: 0 0 30px 0; padding: 5px 0 0 0; }

Does this make sense?

ERNESTO ESPARZA
ERNESTO ESPARZA
1,312 Points

Hello Damien !

You were right !! with this code I solve my issue, IΒ΄ve been playing with the values and it make sense to me now, I was mixing body & header values some how and getting crazy results.

I really appreciate your knowledge sharing and support, I understand this basic concepts now !!

Thank a lot !!

Damien Watson
Damien Watson
27,419 Points

Sweet! No problems, happy to help. :)