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 trialLauren Wright
31,719 PointsSOLVED 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>© 2017 Lauren Wright.</p>
</footer>
</div>
</body>
</html>
5 Answers
Lauren Wright
31,719 Pointsok 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
23,932 PointsTry 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
2,098 PointsThis 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
13,299 PointsHi Lauren
Just add to your body a margin-top of 0;
body {
margin-top: 0;
}
Lauren Wright
31,719 PointsI 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
1,506 PointsHave you tried adding the following to your CSS?
html{ padding:0; margin: 0;}
Lauren Wright
31,719 PointsI tried both of those and neither worked. I'm going to keep going over it though and go over the videos again
Chris Jardine
13,299 PointsChris Jardine
13,299 PointsHi Lauren
Yes, can you post your html also.