UL导航未知填充

Question

此列表中的第一个元素似乎有一些未知的填充：

我该怎样摆脱它？

#wizard-navigation > ul > li {
    list-style-type: none;
    margin-left: 0;
    border-width: 1px;
    border:1px solid #cacaca;
    background:#efefef;
    float:left;
    border-radius:5px;
}

.clearfix::before, .clearfix::after {
  content: " ";
  display: table;
}

#wizard-navigation {
  position:relative;
  float:right;
  left:-50%;
}

#wizard-navigation > ul {
  list-style-type: none;
  padding-left:0 !important;
  margin-left:0;
}

#wizard-navigation > ul > li {
  list-style-type: none;
  margin-left: 0;
  border-width: 1px;
  border:1px solid #cacaca;
  background:#efefef;
  float:left;
  border-radius:5px;
}

#wizard-navigation > ul > li > ul > li {
  list-style-type:none;
  margin-left:0;
  float:left;
}

#wizard-navigation li.continue, #wizard-navigation li.preview {
  margin-left:10px !important;
}

#wizard-navigation a {
  display:block;
  font-weight:bold;
  color:#000;
  padding:10px;
  text-decoration:none;
}

#wizard-navigation li.steps a {
  border-right:1px solid #cacaca;
}

a.no-border {
  border:none !important;
}

<div id="wizard-navigation" class="clearfix">
  <ul style="left:50%;position:relative">
    <li class="steps">
      <ul>
        <li><a href="#">bla</a></li>
        <li><a href="#">bla</a></li>
        <li><a href="#">bla</a></li>
        <li><a href="#" class="no-border">bla</a></li>
      </ul>
    </li>
    <li class="preview"><a href="#">Preview</a></li>
    <li class="continue"><a href="#">Continue</a></li>
  </ul>
</div>

Answer 1

就在这里

.steps > ul {
    padding: 0;
}

http://jsfiddle.net/39x5rnL0/2/

Answer 2

将填充和边距都设置为0：

padding: 0;
margin:  0;