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
Vertical alignment issues with containers and floats/inline-blocks
I am having trouble getting items to align vertically in the main header for the Best City Guide CSS challenge. The link to the challenge is the Watch Video above. I also have included my index.html and style.css file to test with down below. I have a container of floated characters inside of a container within the main header. The page's name on the left side of the header "Best City Guide" is centered, but this is because it is the largest element in the container. The container is clearfixed and will take up as much room as it needs to. If I take the clearfix out everything will collapse. I have looked at older CSS content and some of the videos, but I am missing something somewhere. If anyone wants to take a look at my project I would appreciate it.
Steven Parker228,094 Points
Are you talking about how "Best City Guide" and the nav items are on different lines? To make them vertically aligned, you can set ".name" to "float: left". And then you won't need to change the "display" property because floating it makes it not participate in normal positioning.
If that's not it, perhaps you could explain the issue in different terms.
Also, you might consider proceeding with the next few videos as they show sample formatting solutions which might answer your questions.