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 trialTomasz Cysewski
2,736 Pointsheader doesnt work
Hello, why border-bottom doesnt work in header?Thx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<style>
#id li{
float: left;
width:45%;
margin: 2.5%;
}
img{
max-width:100%;
}
#wrapper {
float: left;
margin: 0 auto;
padding: 0 5%; }
nav ul{
list-style: none;
display: inline-block;
}
nav li{
display: inline-block;
}
@media screen and (min-width: 480px){
nav{
float: right;
width: 45%;
text-align: right;
margin-right: 5%;
font-size: 1.125em;
}
#logo{
float: left;
text-align: left;
margin-left: 5%;
width: 45%;
}
}
header{
border-bottom: 5px solid green;
margin-bottom: 60px;
}
</style>
</head>
<body>
<header>
<a id="logo" href="index.html" >
<h1>Nick Pettit</h1>
<h2>Designer</h2>
</a>
<nav style="text-align: center; padding: 10px; margin: 20px 0 0;">
<ul>
<li><a href="index.html">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="id" class=" gallery">
<li><img src="numbers-01.jpg" alt="numbers-01"></li>
<li><img src="numbers-02.jpg" alt="numbers-01"></li>
<li><img src="numbers-06.jpg" alt="numbers-01"></li>
<li><img src="numbers-09.jpg" alt="numbers-01"></li>
<li><img src="numbers-12.jpg" alt="numbers-01"></li>
</ul>
</section>
</div>
<footer style="font-size: 0.75em; text-align: center; padding: 50px; color: #ccc; clear: both">
<p>© 2014 Nick Pettit.</p>
</footer>
</body>
</html>
Tomasz Cysewski
2,736 Pointsit looks like this https://s28.postimg.org/gyvn0eikt/Screenshot_from_2017-05-07_19-11-14.png
the green stripe should be at the bottom of the header
1 Answer
Jason Anello
Courses Plus Student 94,610 PointsIf your bottom border is appearing at the top then it likely means your header has collapsed to zero height and it's not containing the logo and nav elements. This happens because the logo and nav are floated.
It looks like you've deviated quite a bit from how this project is taught in the course so you're going to have some differences and problems that the teacher doesn't have.
The header
element was supposed to be floated left in this project in order to prevent the collapsing that you seem to be experiencing. I don't see that in your css. Also, you floated the wrapper div but the instructor never did that.
Try adding float: left;
to your existing header
styles and see if that fixes your problem.
You may want to consider starting over or launching the current workspace and starting from there.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsYou don't see the border at all?
Can you post a snapshot of your workspace?