Zachary JacksonTreehouse Project Reviewer
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 Parker204,853 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.