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

Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points
Posted by Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points

whitespace above heading is still there?

 #wrap{
    max-width: 940px;
    margin: 0 auto;
}


header{
    background: black;
    float: left;
    color:white;
    margin: 0 0 30px 0;
    padding: 10px 0 0 0;
    width:100%;
}

hgroup{
    text-align: center;
}

nav{
    background: grey;
    text-align: center;
}

nav ul{
    list-style: none;
}

nav li{
    display: inline-block;
}

a{
    text-decoration: none;
}

Above is my CSS code, i do not know why the the white space above header is still there. I tried increasing the bottom margin and abov padding but nothing helps.

2 Answers

Jaco Burger
Jaco Burger
20,807 Points
Jaco Burger
Jaco Burger
20,807 Points

Hi Muhammed. Can it be that you have a H1,H2,H3 etc. tag inside your header element? Remember h tags has default margins. To overwrite that, do something like this.

h1 { margin: 0; }

Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points
Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points

Thanks Jaco, i tried making the h1 margin and padding too but its not working. Here is my HTML code if it may help::

<!DOCTYPE HTML>
<html>

<head>
    <title>Practice Development</title>
    <meta charset+"utf-8">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
    <div id= "wrap">
        <header>
            <hgroup>
                <h1><abbrtitle= "Muhammad">M.</abbr>Haris Khan</h1>
                <h2>Front End Developer | Online Marketeer</h2> 
            </hgroup>
            <nav>
                <ul>
                    <li><a href="#">About</a><li>
                    <li><a href="#">Skills</a></li>
                    <li><a href="#">Education</a></li>
                    <li><a href="#">Experience</a></li> 
                    <li><a href="#">Portfolio</a></li>
                </ul>
                        </nav>                           

            <div id ="about">   
                <img id="profilepic" src="img/haris.jpg" alt="profile picture">
                <h1> About<h1>
                    <p>Experienced and well educated in the field of Front-development and Online Marketing. I have discplined and taught myself from the best, and 
                    i kept on going for more, which led to me pursue a career in these  dynamic fields.</p>
            </div>



            </header>
    </div>
Ralph John Brabante
Ralph John Brabante
Courses Plus Student 7,153 Points

Hah! Thanks Jason! I did to much I forgot I did added an h3 XD silly me thanks!

Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points
Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points

Sorry it was a stupid mistake as usual, normalize.css was not properly placed . thanks for time jason