display: inline block positioning acting strange

Question

I tried to google this problem, remade it in a fiddle, oddly for me, the problem went away, while I have copied almost every code (exept the jquery links etc because those are not needed in FIDDLE).

I would loveto know if anyone can tell me why my inline-block elements, when given a hieght,width,margin and padding not float exactly next to eachother but kind of ident after the first?

link ; http://eightytwenty.nl/blogindex.html <-- doesnt work, samecode

http://jsfiddle.net/AFGU4/7/ <-- works

<div class="surroundContainer">
<div class="hPage firstPost">
    <section><article>
    <h1>First post,for Joey</h1>
    </article></section>
</div>
<div class="hPage">
    <section><article>
    <p>Way too scary for me.</p>
    </article></section>
</div>
<div class="hPage">
    <section><article>
    <p>Way too scary for me.</p>
    </article></section>
</div>
<div class="hPage">
    <section><article>
    <p>Way too scary for me.</p>
    </article></section>
</div>

.surroundContainer {
overflow-x:scroll;
overflow-y: hidden;
white-space: nowrap;
height:80vh;
}
.hPage {
background-color: blue;
width:32vw;
margin:  0;
padding: 0;
display: inline-block;
height: 80vh;
}
.firstPost {
background-color: grey;
}

Answer 1

If you have problem with the white space between each div and you don't want to use float, then you need to clear the white space in your html (like new line), you can use comment between each end of a div:

<div class="hPage firstPost">
    <section><article>
    <h1>First post,for Joey</h1>
    </article></section>
</div><!--
--><div class="hPage">
    <section><article>
    <p>Way too scary for me.</p>
    </article></section>
</div><!--
--><div class="hPage">
    <section><article>
    <p>Way too scary for me.</p>
    </article></section>
</div><!--
--><div class="hPage">
    <section><article>
    <p>Way too scary for me.</p>
    </article></section>
</div>

see here for reference.

Answer 2

Fixed it by using vertical-align: top;