Alignment problem with inline-block CSS attribute

I'm trying to create a grid menu on a web site. I am using display: inline-block to do so and it works very well, but for some reason, the last row doesn't line up.

I tried display: inline-table which works just as well but has the same problem. Each square with text is contained within a div that has the display attribute set to inline-block.

<div class="parcel">
    <a href="http://www.pizzahut.com">
    <img src="../img/computerGraphics.jpg"/>
    Computer Graphics </a>
</div>
<div class="parcel">
    <img src="../img/开发者_开发问答web.jpg"/>
    Web
</div>
<div class="parcel">
    <img src="../img/photography.jpg"/>
    Photography
</div>
<div class="parcel">
    <img src="../img/models.jpg"/>
    3D Modeling
</div>
<div class="parcel">
    <img src="../img/games.jpg"/>
    Games
</div>
<div class="parcel">
    <img src="../img/graphicDesign.jpg"/>
    Visual Design
</div>
<div class="parcel">
    <img src="../img/animation.jpg"/>
    Animation
</div>
<div class="parcel">
    <img src="../img/illustration.jpg"/>
    Illustration
</div>
<div class="parcel">
    <img src="../img/other.jpg"/>
    Other
</div>

Does anyone know why the last row would do this?

text-align: justify; of your contentText div causes the small divs to have spaces in between, depending on the content of the divs. Try removing the text-align: justify; or change it to text-align:center from contentText and it will work fine.

I find this weird though, I tried using justify and the last line always not justify like in a newspaper.

Hard to tell without seeing the extra HTML and CSS but it could that you have link break or some white space or another element in there, before the last closing div, that is causing the last line to render differently.

EDIT

Had a look at the page you posted just now and @domanokz is right: change

div.contentText {
    text-align: justify;
}

to

div.contentText {
    text-align: center;
}

Also removed that extra br, although it was not necessary for the fix.