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 Introduction to HTML and CSS (2016) Getting Familiar with HTML and CSS Building Web Pages with HTML and CSS

Nathan Richie
Nathan Richie
1,428 Points
Posted by Nathan Richie
Nathan Richie
1,428 Points

Question about display:flex in .nav vs .main-nav

Why do you have to use display:flex in .nav instead of .main-nav. It doesn't work in main-nav. It just right aligns the list. More yet, whey do you even need a main-nav and nav class? Something to do with styling lists? Is main-nav just used as a container? Still very new to styling and css. So i'm recreating this site and checking the css every time I add a new property to see what changes.

Thanks!

1 Answer

Christopher Gilbert
Christopher Gilbert
6,239 Points
Christopher Gilbert
Christopher Gilbert
6,239 Points

Hi Nathan I hope I can help answer your questions.

Your .main-nav div acts as an overall container for the navigation bar. It is the black bar that stretches the entire width of the browser.

Your .nav is a felxbox container that will hold all of the <li> elements you include. You will adjust the way your li displays or is positioned by adjusting the css properties with your .nav.

A handy trick is to open the developer tools on your browser. Or right click on the webpage and then choose inspect element. As you move your mouse around you will see the html elements and their attached classes appear you can see what space they take up along with padding etc. It can be daunting at first but utilizing the developer tools in web browsers can really help you understand what is what and how css is affecting the page.

*Additionally display:flex is apart of css flex boxes and you can look at this handy page to get a good idea on how they work and the relation between a flex container and a flex item. https://css-tricks.com/snippets/css/a-guide-to-flexbox/