Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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>

Hi Lauren

Yes, can you post your html also.

5 Answers

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>

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

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.

Hi Lauren

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

body {
 margin-top: 0;
}

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

Have you tried adding the following to your CSS?

html{ padding:0; margin: 0;}

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