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

CSS Build a Simple Website Styling Content Finishing the CSS

Posted by ltoshea
ltoshea
845 Points

Navigation bar problems (ul.nav li {})

Hi All, I'm following the tutorial where we are creating a navigation bar out of a list.

<div class="grid_8 omega">
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">About Me</a></li>
        </ul>   
    </div>```

```css
ul.nav {
    margin: 20px 0 0 0;
    list-style:none;
    float:right;
    display:inline-block;
}

ul.nav li {
    float:left;
    margin-right: : 40px;
    padding:5px 0;
}

For the ul.nav li{} section the margin seems to have no effect. No matter if I use margin-right or margin-left or what I set the value too the words seem all crammed together with no margin between them. I added a display property in ul.nav and tried block and inline-block after a forum suggestion but still no joy.

Any ideas?!

Thanks!

1 Answer

ltoshea
ltoshea
845 Points

Fixed, think I had a double colon the entire time which I failed to pick up on until I posted it! Are there any smart ways of 'debugging' CSS to spot error s like this early on? Thanks :)

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

For both HTML & CSS ...

  • Using a text editor with syntax highlighting and paying attention to when the "colors look weird"
  • Validating your HTML & CSS, if your HTML is invalid then your CSS will do weird things