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

HTML

Posted by Byron Farrell
Byron Farrell
5,700 Points

Span pushing ul element down

Hi,

The header bar contain a span and a nav with a nested ul tag. For some reason the span is pushing the nav/ul down a few pixels. Can anyone shed some light as to what is going on here?

Link to my code: https://w.trhou.se/bqb9lo1ms8

Thanks for your time!

1 Answer

Benjamin Larson
Benjamin Larson
34,055 Points

It has to do mainly with inline vs block level elements. The nav and ul elements are both defined as block-level elements, meaning they will always start on a new line and take up the full width of the page. As a quick and dirty fix for this example, you could apply CSS to the 'nav' and 'ul' element to set the display property to inline.

You'll likely want to do give them a class or Id to select in your CSS, rather than modify the default styling for every unordered list as I'm doing below.

nav, ul {
  display: inline;
}
Byron Farrell
Byron Farrell
5,700 Points

Thank Benjamin,

Your code worked. Are most tags by default display: block;?