I have an unordered list that I need centered within a div, but also side by side. To do this, I used `text-align: center;` on the div, and `display: inline-block;` on the list items. However, when I do this, some whitespace appears between the list items. [Here is a demo](http://jsfiddle.net/26eg9/)

html

```
<div class="wrap">
    <ul>
      <li>hello</li>
      <li>buddy</li>
      <li>good</li>
      <li>morning</li>
    </ul>
</div>

```

css

```
li {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    border: 1px solid green;
}

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 95%;

}

div.wrap {
    width: 500px;
    border: 1px solid red;
    text-align: center;
}

```