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

CSS

Posted by Nathan Josef
Nathan Josef
4,805 Points

Getting logo and nav li to line up with eachother using floats.

Best way I can explain this is with codepen -

http://codepen.io/anon/pen/WrNLRx

I'm trying to get the nav li items to be inline with the logo but they are all different sizes and look odd. How do I get them directly centered horizontally?

I know I can use a different method i.e table or inline-block but I'm trying to learn how to do it with floats like in css layout basics course with Guil.

2 Answers

Kevin Kenger
Kevin Kenger
32,834 Points

Hey Nathan,

The reason your nav li items are looking a little odd is because of a simple typo.

Check this snippet I pulled from your code and see if you can find where you're missing something:

<h1 class="main-logo"><a><img src="https://s-media-cache-ak0.pinimg.com/236x/ba/45/d3/ba45d3380b22f3af6343c1b6b0d559af.jpg"</a></h1>
Nathan Josef
Nathan Josef
4,805 Points
Nathan Josef
Nathan Josef
4,805 Points

Looks like I'm missing the closing bracket on my img tag? I appreciate the help Kevin.

It's seems so easy to make a small typo and then spend the next 2 hours ripping apart your layout :)

Kevin Kenger
Kevin Kenger
32,834 Points

Nailed it. And believe me, I've been there too many times.