Alignment issues on horizontal scroll gallery

Question

I trying to add a project description to a horizontal scroll gallery. What causes the padding above the .box class? Been trying to figure this out for a while and would appreciate any pointers. Thanks!

CSS

.box {
background-color: #999;
height: 300px;
width: 500px;
padding: 80px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
white-space:normal;
}
ul.horizontal-slide {
margin: 0;
padding: 0;
width: 100%;
white-space: nowrap;
overflow-x: auto;
}

ul.horizontal-slide li[class*="span"] {
    display: inline-block;
    float: none;
}

ul.horizontal-slide li[class*="span"]:first-child {
    margin-left: 0;
}

HTML

<ul class="horizontal-slide">

<li class="span2 box">
        <h1>Title</h1>
        <br>    
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
        </p>
</li>
<li class="span2">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/500X300" alt="" />
    </a>
</li>
<li class="span2">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/500X300" alt="" />
    </a>
</li>
<li class="span2">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/500X300" alt="" />
    </a>
</li>
</ul>

See examples here: http://jsfiddle.net/3Dvkf/

Answer 1

Add vertical-align:top to the li elements, they are being aligned to the default (baseline).

UPDATED EXAMPLE HERE

ul.horizontal-slide li {
    vertical-align: top;
}

Answer 2

inline-block aligns content to the bottom. add vertical-align: top; to your class:

ul.horizontal-slide li[class*="span"] {
    display: inline-block;
    vertical-align: top;
    float: none;
}