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

HTML How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Posted by Lauren Wright
Lauren Wright
31,719 Points

SOLVED I'm having a problem with the white bar on the top not going away.

/***********************************
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: 0 0 30px 0;
    padding: 5px 0 0 0;
    width: 100%;
}

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

h1 {
    font-family: 'Oswald', 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;
}


/***********************************
NAVIGATION
***********************************/

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

/* site body */
body {
    background-color: #fff;
    color: #999;
}

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

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

/* logo text  */
h1, h2 {
    color: #fff;
}
/* links */
a {
    color: #6ab47b;
}

/* nav background on mobile */
nav {
    background: #599a68;
}

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

I can post relevant html as well if needed

<!DOCTYPE html>
<html>




    <head>
        <meta charset="utf-8">
        <title>Lauren Wright | Designer</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>



    <body>
        <header>
            <a href="index.html" id="logo">
                <h1>Lauren Wright</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>




     <div id="wrapper">
            <section>
                <ul id="gallery">
                <ul>
                    <li>
                        <a href="img/numbers-01.jpg">
                            <img src="img/numbers-01.jpg" alt="">
                            <p>Experimentation with color and texture.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-02.jpg">
                            <img src="img/numbers-02.jpg" alt="">
                            <p>Playing with blending modes in PS</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-06.jpg">
                            <img src="img/numbers-06.jpg" alt="">
                            <p>Trying to create an 80s style of glows.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-09.jpg">
                            <img src="img/numbers-09.jpg" alt="">
                            <p>Drips created using PS brushes.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-12.jpg">
                            <img src="img/numbers-12.jpg" alt="">
                            <p>Creating shapes using repetition.</p>
                        </a>
                    </li>
                </ul>
            </section/>
            <footer>
                <a href= "https://twitter.com/dandyserenity"><img src="img/twitter-wrap.png" alt="twitter logo"></a>
                <a href="https://www.facebook.com/DandySerenity/"><img src="img/facebook-wrap.png" alt="facebook logo"></a>
                <p>&copy; 2017 Lauren Wright.</p>
            </footer>
        </div>
    </body>
</html>
Chris Jardine
Chris Jardine
13,299 Points

Hi Lauren

Yes, can you post your html also.

5 Answers

Lauren Wright
Lauren Wright
31,719 Points

ok so I figured it out I had two opening ul tags one was labeled gallery and other other just plain I deleted the plain one and it corrected itself

<div id="wrapper"> <section> <ul id="gallery"> <ul> ******************************************************************** <- this was my problem <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in PS</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80s style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using PS brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul>

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

Try using clear: both in the #wrapper selector. Don't beat yourself up. Instructor never showed this step :)

Use clear both in the wrapper. Instructor never showed this fix.

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
  clear: both; /*removes white space at top*/
}
Lee Toye
Lee Toye
2,098 Points
Lee Toye
Lee Toye
2,098 Points

This worked for me great! But I don't understand why. The #wrapper div doesn't include the header element, so I am not sure how it would affect the white bar at the top.

Chris Jardine
Chris Jardine
13,299 Points
Chris Jardine
Chris Jardine
13,299 Points

Hi Lauren

Just add to your body a margin-top of 0;

body {
 margin-top: 0;
}
Lauren Wright
Lauren Wright
31,719 Points

I tried adding that in GENERAL but it didn't do anything

/*********************************** GENERAL ***********************************/

body { font-family: 'Open Sans', sans-serif; margin-top: 0; }

wrapper {

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

} a { text-decoration: none; }

img { max-width: 100%; }

Kay Angevare
Kay Angevare
1,506 Points
Kay Angevare
Kay Angevare
1,506 Points

Have you tried adding the following to your CSS?

html{ padding:0; margin: 0;}

Lauren Wright
Lauren Wright
31,719 Points
Lauren Wright
Lauren Wright
31,719 Points

I tried both of those and neither worked. I'm going to keep going over it though and go over the videos again