I'd like to display four elements side by side. I'm using `display: table` and `display: table-cell` to accomplish this:

```css
#container {
  width: 960px;
  background-color: orange;
  height: 400px;
  }

#table {
  display: table;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
  }

div.item {
  display: table-cell;
  height: 150px;
  background-color: blue;
  }
```

```html
<div id="container">

  <div id="table">
    <div class="item">
      Text 1
    </div>
    <div class="item">
      Text 2
    </div>
    <div class="item">
      Text 3
    </div>
    <div class="item">
      Text 4
    </div>
  </div>

</div>
```

How can I make the rightmost and leftmost cells flush with the container `div's` edge and maintain equal spacing between the inner cells? 

Thank you!