Странная проблема со списком в моем случае

У меня есть странная проблема с моим списком ul

У меня есть что-то вроде

<section id='slide-container'>
        <h1>Slide</h1>
        <div class='break'></div>
        <div id='left-nav'><a href='#'><img src='images/left-nav.png'/></a></div>
        <ul id='slide-list'>
            <li><img src='images/slide1.png' /></li>
            <li><img src='images/slide2.png' /></li>
            <li><img src='images/slide3.png' /></li>
            <li><img src='images/slide4.png' /></li>
            <li><img src='images/slide5.png' /></li>         
        </ul>
        <div id='right-nav'><a href='#'><img src='images/right-nav.png'/></a></div>
</section>

my css

#slide-container{
    width: 708px;
    height: 1px;
    line-height: 190px;
    border:solid 1px #EEEEEE;
    white-space: nowrap; overflow: auto;
}

#slide-container h1{
    margin:8px 10px 0 10px;
    font-size: .8em;
    display: inline-block;
}

section #slide-list {
    display: inline-block;
    height: 142px;
}

section #slide-list li{
    display: inline-block;
    width: 162px;
    height: 142px;
    background-color: grey;
    line-height: 142px;
    vertical-align: middle;
    margin: 0 6px;
}

section #left-nav{
    display:inline-block;
    line-height: 120px;
    vertical-align: middle;
}

section #right-nav{
    display: inline-block;
    line-height: 120px;
    vertical-align: middle;    
}

.break{
   clear:both;
}

По какой-то причине мой слайд-лист li сдвинут на 20-30 пикселей.

Мои результаты

Линия штриховки - слайд-контейнер div

 -----------------------------------------------
|                                              
|
|  left nav slide slide slide slide right nav
|
| 
 ----------------------------------------------

мои кодовые результаты

 -----------------------------------------------
|                                     
|
|  
|    left nav slide slide slide slide right nav
| 
 ----------------------------------------------

Я не понимаю, что здесь происходит. Я также сбросил свой CSS, чтобы иметь нулевой запас и дополнение для всех элементов. Может кто-нибудь мне помочь? Большое спасибо!