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

Gregory Wyszynski
Gregory Wyszynski
9,594 Points
Posted by Gregory Wyszynski
Gregory Wyszynski
9,594 Points

Fixed white space with header {margin: -20px 0 30px 0;} but don't know why?

I fixed the white space issue above the header with this code: header {margin: -20px 0 30px 0;}.

Why did I have to do this but Nick did not in his example?

Is this a legit fix or are there better options?

Below is my CSS and HTML for reference.

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



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

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

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

h1 {
    font-family: 'Changa One', 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: ABOUT
**********************************/


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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Greg Wyszynski | Awesomeness</title>
        <link rel="stylesheet" type="text/css" href="normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
        <header>
            <a href="index.html" id="logo">
                <h1>Greg Wyszynski</h1>
                <h2>Awesomeness</h2>
            </a>
            <nav>
                <ul>
                    <li><a href="index.html" class="selected">About</a></li>
                    <li><a href="resume.html">Resume</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>   
            </nav>
        </header>
        <div id="wrapper">
            <section>
                <p>Gallery will go here</p>
            </section>
            <footer>
                <a href="http://twitter.com/gregorywyz"><img src="twitter-wrap.png" alt="Twitter Logo"></a>
                <a href="http://facebook.com/gregwyszynski"><img src="facebook-wrap.png" alt="Facebook Logo"></a>
                <p>&copy; 2014 Greg Wyszynski.</p>
            </footer>
        </div>
    </body>
</html>

2 Answers

bleedcmyk
bleedcmyk
5,945 Points
bleedcmyk
bleedcmyk
5,945 Points

The issue is coming from the float on your header, and the margin on your h1 tag.

Try removing the float altogether from the header, and setting the top-margin on your h1 to 0.

You can still give the h1 space by adding a padding to the top of the header.

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

h1 { font-family: 'Changa One', sans-serif; font-size: 1.75em; font-weight: normal; line-height: 0.8em; margin: 0 0 10px 0; }

This should resolve your issue, and give you similar margins back.

Gregory Wyszynski
Gregory Wyszynski
9,594 Points
Gregory Wyszynski
Gregory Wyszynski
9,594 Points

Thank you imuya, I like the way you handled this issue better than I did and it gets the desired result. However, after coming back to this at a later time, I changed my code to match Nick's again and everything was fine (no white). His code does have the float also. Funny how that works I guess, but thanks again!

Clyde Taylor
Clyde Taylor
1,123 Points
Clyde Taylor
Clyde Taylor
1,123 Points

In the video Build Navigation with Unordered Lists (3:01), Nick has float included in the code. I removed the float and it fixed the issue. Thanks.