Question: I have a navbar that is like so:

```
<ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="testimonial.html">Testimonials</a></li>
        <li><a href="service.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
</ul>

```

And it has css like so:

```
.nav_bar {
  margin: 0px 0px 0px 0px;
  height:40px;
} 
.nav_bar ul {
  margin:0px;
  padding:0;
  list-style:none;
  width:940px;
}
.nav_bar li {
  margin: 0px 0px 0px 0px;
  display:inline;
}
.nav_bar li a {
  text-align:center;
  border-left: 1px solid #fff;
  text-decoration:none;
  padding: 20px;
  width:147px;
  background:#000000;
  color:#eee;
  float:left;
} 

```

As you can imagine, this puts a white line to the left of the elements, Which I want except for the first one. I tried adding:

```
<a href="index.html" style="border-left:1px solid color:#000000">Home</a> 

```

to the first li but it doesn't do anything, and in developer tools, it is crossed out with a orange triangle next to it. So, how would I accomplish the task at hand?
Thanks for your help.

Answer: 
You have a slight error in your `border-left` syntax, it should be:

```
<a href="index.html" style="border-left:1px solid #000000">Home</a> 

```

See this [introduction to CSS shorthands](http://www.sitepoint.com/introduction-css-shorthand/) for more info on the sort of syntax you should use.
Why not do
`.nav_bar li a:first-child {
 border-left: 1px solid #000;
}`

Or if you don't want it at all
`.nav_bar li a:first-child { border:none; }`