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!
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
Matt Jones
1,950 PointsCSS Portfolio styling, need help!
I've been following the tutorial on how to create and deploy a website and I'm having some trouble with the NAV. Instead of the NAV being in a border that stretches across the entire screen, it's contained within three separate boxes.
Not sure what the specific CSS would be to change this, I'm a green horn to coding and could do with a nudge in the right direction.
8 Answers
Bryce Santos
11,157 PointsPost your code. Click on the cheatsheet below the reply box so you can post the code easily.
Matt Jones
1,950 Pointsnav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
margin: 0px 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px
}
Matt Jones
1,950 Points <nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About<a/></a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Bryce Santos
11,157 PointsThe nav borders the li elements like it's supposed to. The li elements are the items that are sectioned off in 3.
Matt Jones
1,950 PointsI've downloaded the CSS file and renamed it so I can compare the two and the code is the same, I'm not sure if there's an issue somewhere else further down.
Bryce Santos
11,157 PointsSo imagine this: The nav is a box that's spanning the screen from left to right and containing 3 separate boxes, the 3 li's. Are you trying to make sure those 3 li's span the screen from left to right within the nav box?
Matt Jones
1,950 Points
The top bar is what the NAV looks like with my code. The second bar in the image is how it should look.
Bryce Santos
11,157 PointsOne of the problems is your HTML. You have an extra </a> after About.
Bryce Santos
11,157 PointsDon't forget to close out your nav a padding style. You forgot a semi-colon there.
Bryce Santos
11,157 PointsBryce Santos
11,157 PointsBoth HTML and CSS, as well :)