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
Bob Sutherton
20,160 PointsLogo and links not lined up
Would anyone like to take a guess at why my "logo" and links aren't exactly aligning like they are in Guil's tutorial? I have posted a link to my codepen if you want to check the issue out.
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsIn the video, Guil did not have the ul wrapped in a nav element like you have in your codepen. So you have an extra block level element whose display needs to be set as inline.
Bob Sutherton
20,160 PointsJason, that did not solve the problem as you will see here.
Jason Anello
Courses Plus Student 94,610 PointsI think that your html and css changed a little bit in the header section from your first codepen.
I wasn't suggesting that you take out the nav element and you didn't have to. It would be more semantic if you decide to put it back in.
You just have to make sure that you've set all the block level elements in the header to inline.
In this most recent codepen, you've only set the h1 and li to inline.
h1,
li {
background: brown;
display: inline;
padding: 10px 20px;
border-radius: 5px;
}
You still have the block level <ul> which is causing the navigation to drop below the heading. So that needs to be set as inline as well. If you bring the nav element back in then you have to make sure to set both the nav and ul to inline.
Bob Sutherton
20,160 PointsThanks Jason. That did solve the problem. Funny, I thought I had tried that but I guess not. I would also like to ask about the term "semantic" as you used it. I have heard it a lot in the videos and think I understand that it just means clean looking or organized. I am correct in understanding how that term is used?
Jason Anello
Courses Plus Student 94,610 PointsGlad it worked.
It has more to do with the meaning of your content. The ul element that you used for the navigation could also be used for an actual list like a shopping list displayed on your page. Sometimes you'll see the ul element being used to markup a grid of photo thumbnails. It has many different uses. By putting a nav element around it, you're giving that content more meaning to search engines. You're announcing, so to speak, that what's inside is a set of navigation links.
Before the nav element came along you might see <ul id="nav"> the id of nav is at least partially an attempt to give the ul more meaning and also make it easier to target for css styling.
div's and span's on the other hand are essentially meaningless. They're generic containers that don't convey any information about what's inside them. Using descriptive id and class names with them can impart some meaning though.
I hope this helps a little.
Bob Sutherton
20,160 PointsYes, that helps a lot. Thanks, Jason.