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
claire g
6,734 Pointsinline-block not working
hello,
i was hoping someone could help... I'm a little stuck, my navigation blocks won't sit inline for some reason , I've check and rechecked but I can't find the error in the code. I've copied it below... and it would be great if anyone had a moment to help take a second look at it for me.
thanks so much
/* *********************** NAVIGATION ********************** */
nav { text-align: center; padding: 10px, 0; margin: 20px 0 0; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav li { display: inline-block; }
nav a { font-family: 'Lora', serif; font-size: 1em; font-weight: 400; padding: 15px 10px; }
4 Answers
Alan Kolić
8,384 Pointstry to use
nav ul li {
}
to target the list items.
Also, remove the comma in your padding value between 10px and 0.
nav {
text-align: center;
padding: 10px, 0;
margin: 20px 0 0;
}
Hope this helps and let us know if that worked out.
claire g
6,734 PointsHi Alan,
Thanks for your help, I've tried the suggestions but it's still not sitting in line. I've taken a snapshot of the workspace in case there is anything super obvious I am missing, but I've rechecked the html section too but i can't spot anything there either. I'm totally baffled. Thanks again!
Alan Kolić
8,384 PointsChange this
<nav>
<ul><a href="index.html" class="selected">portfolio</a></ul>
<ul><a href="about.html">about</a></ul>
<ul><a href="contact.html">contact</a></ul>
</nav>
to this
<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>
In your main.css file you were targeting a <li> element but it wasn't in your index.html file.
claire g
6,734 PointsAmazing, it works!! Thanks so much for your help, have great evening!
Alan Kolić
8,384 PointsAwesome! Keep up the good work!