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


8,742 Points

The border around my nav bar will not show up in google chrome.

I've been experimenting with ems and pixels for my resume website. I decided to change my pixel units to em units. When I used pixel units my nav bar border showed up on I.E., Firefox, and Google Chrome. After I changed my pixel units to em units the nav border still showed up in I.E., and Firefox, but not Chrome. Does Chrome require a developer rule in css that I'm missing?

Also I would like to increase the font size of my text in my nav bar, but I'm unsure of where to that in the .nav, .nav li, or . nav a Thanks in advace for any help. The code is below.

.nav { 
    border: 1em solid #ccc; 
    border-width: .05em 0; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
.nav li { display: inline; } 
.nav a { 
    display: inline-block; 
    padding: .63em; 
    text-decoration: none; 

2 Answers

Dave McFarland
Dave McFarland
Treehouse Teacher

The problem is the border-width declaration: border-width: .05em 0; If the default text size for the page is 16px, then .05 em is .8 pixel -- that's less than 1 pixel so Chrome (and Safari) round this down to 0, showing no border.

8,742 Points

Thanks David for the help. I'll change that and let you know how it works. Editing the post It's fixed David!!! Thank you so much for the help my nav now looks awesome in all three, I'm so happy Thank you again!!!!!!