How do I align this border?

Question

This is what I have so far: http://jsfiddle.net/u8GHJ/

What I'm trying to do is attach the black border to the left side of the blue box. What is an easy way to achieve this? And no, I can't just add border-left:4px solid black; to #container li .

It should look like this: http://i.stack.imgur.com/oLBK8.png

Edit: I need to move the border to the container and not the opposite, so setting the padding to 0 won't help in this case.

Answer 1

There's default padding on the ul element. To remove it, add ul {padding:0;} ( or #container {padding:0;} ) to your css and every thing will look peachy.

Check out your updated example here:

http://jsfiddle.net/agconti/u8GHJ/1/

Answer 2

ul have default padding Give this a try to resolve your problem:

#container{
    padding:0;
}

JS Fiddle

Answer 3

I have solved your problem. Just add css property of ul

ul{
    padding:0px;
  }

Click here for DEMO