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 Jonathan Jackson
Jonathan Jackson
2,716 Points

Having trouble with space appearing above my header regardless of CSS rules. Can anyone help?

Here's my HTML for the header:

    <header>

        <a href="index.html" id="logo">

            <h1>Jonathan Jackson</h1>
            <h2>Developer</h2>

        </a>

        <nav>

            <ul>

                <li><a href="index.html" class="selected"><p>Projects</p></a></li>
                <li><a href="contact.html"><p>Contact</p></a></li>
                <li><a href="resume.html"><p>Resume</p></a></li>

            </ul>

        </nav>

    </header>

And here's the CSS:

/* Centers page logo */

logo {

text-align: center;
margin: 0;

}

/* Floats header */

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

/* Sets styling for logo */

header h1, header h2 { color: #fff; font-family: 'Fjalla One', sans-serif; margin: 15px; }

/* Styles logo w/ underline */

header h1 { text-decoration: underline; padding-top: 14px; }

/* Sets styling for sub-logo */

header h2 { margin: -19px 0 10px 0; font-size: 1.75em; }

It's odd because I don't have extra space above the header on the index.html doc, but I do have a space on the contact.html and resume.html docs.

Please help- I don't know what I could be missing. If you need the full code, I can provide it.

Jonathan Jackson
Jonathan Jackson
2,716 Points

Please ignore the odd boxing for the CSS. It's due to my overuse of comments, but I like my comments.

3 Answers

Yaşar Dilbaz
Yaşar Dilbaz
5,454 Points

The code in normalize.css that's fixing the problem is "body{margin:0;}". I deleted normalize.css and put this on the top of custom css, it fixed the problem.

Jonathan Jackson
Jonathan Jackson
2,716 Points

That worked! Why it would not include that line I don't know, but that fixed it. You have been very helpful. :)

Yaşar Dilbaz
Yaşar Dilbaz
5,454 Points
Yaşar Dilbaz
Yaşar Dilbaz
5,454 Points

Did you use "#" for ids and "." for classes in CSS? Like:

logo{

text-align: center; margin: 0; }

Jonathan Jackson
Jonathan Jackson
2,716 Points

Yes- for some reason the pound didn't copy over

Yaşar Dilbaz
Yaşar Dilbaz
5,454 Points
Yaşar Dilbaz
Yaşar Dilbaz
5,454 Points

body has 8px margin but I couldn't figure out where it's coming from. So if you didn't you "normalize.css" try that out.

Yaşar Dilbaz
Yaşar Dilbaz
5,454 Points

Here is the link: https://necolas.github.io/normalize.css/4.1.1/normalize.css And it should be added to html before your custom CSS, like this: <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="style.css">

Jonathan Jackson
Jonathan Jackson
2,716 Points

I've got that as well. I really don't understand what's different.

Jonathan Jackson
Jonathan Jackson
2,716 Points

Here's the head that's on every page:

<head>

    <meta charset="utf-8">


    <title>Jonathan Jackson | Developer</title>
                                                                                            <!--You'll have to develop your own normalize file eventually, since you 
                                                                                                    can't use Treehouse's for your personal portfolio.-->
    <style> @import 'https://fonts.googleapis.com/css?family=Fjalla+One|Raleway'; </style>


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


</head>