等间距导航链接

Question

我正在尝试创建等间距的导航链接。 （链接将从CMS动态生成，因此我不确定会有多少链接）

另一个要求是第一个和最后一个链接应该位于布局的两个边缘。

我认为我非常接近，但链接并不是平均分配的。

CodePen：http://codepen.io/xhtml-lab/pen/OPdbbO

请建议任何其他方法或改进以使链接等间隔？

    header {
      width: 960px;
      height: 20px;
      background: #f00;
      margin: 0 auto 10px;
      text-align: center;
      color: #fff;
      padding: 10px 0px;
    }
    .strip {
      background: rgba(130, 190, 191, 0.95);
    }
    .nav-wrap {
      width: 960px;
      margin: 0 auto;
      nav {
        display: table;
        width: 100%;
      }
      ul {
        list-style: none;
        padding: 0px;
        display: table-row;
        li {
          display: table-cell;
          text-align: center;
          a {
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            padding: 25px;
            display: inline-block;
            position: relative;
            &: hover {
              background: rgba(255, 255, 255, 0.25);
            }
          }
          &:first-child {
            text-align: left;
            a {
              padding-left: 0px;
              &: hover: before {
                content: '';
                position: absolute;
                width: 25px;
                height: 100%;
                left: -25px;
                top: 0px;
                background: rgba(255, 255, 255, 0.25);
              }
            }
          }
          &:last-child {
            text-align: right;
            a {
              padding-right: 0px;
              &: hover: after {
                content: '';
                position: absolute;
                width: 25px;
                height: 100%;
                right: -25px;
                top: 0px;
                background: rgba(255, 255, 255, 0.25);
              }
            }
          }
        }
      }
    }

<header>
  Header content here
</header>

<div class="strip">
  <div class="nav-wrap">
    <nav>
      <ul>
        <li><a href>Home</a>
        </li>
        <li><a href>About</a>
        </li>
        <li><a href>Services</a>
        </li>
        <li><a href>Portfolio</a>
        </li>
        <li><a href>Blog</a>
        </li>
        <li><a href>Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</div>