Aligning of block-layout

I'm trying to make a layout of blocks, like this: Pattern design

But I get this: Pattern made with HTML and css

Does someone know what went wrong? You would really help me out!

HTML:

<div id="blocks">
  <div class="horBlock" id="javaBlock" onclick="launchInfo(); java();">
    <img src="javaLogo.svg">
  </div>
  <div class="verBlock" id="phpBlock" onclick="launchInfo(); php();">
    <img src="phpLogo.svg">
  </div>
  <div class="verBlock" id="objective-CBlock" onclick="launchInfo(); objectiveC();">
    <img src="objective-CLogo.svg">
                    </div>
  <div class="verBlock" id="CBlock" onclick="launchInfo(); C();">
    <img src="CLogo.svg">
  </div>
  <div class="verBlock" id="pythonBlock" onclick="launchInfo(); python();">
    <img src="pythonLogo.svg">
  </div>
  <div class="horBlock" id="jsBlock" onclick="launchInfo(); js();">
    <img src="jsLogo.svg">
  </div>
</div>

CSS:

    #blocks {
    font-size: 0; /* To prevent white-space from taking space */
}

.horBlock, .verBlock {
    display: inline-block;
    box-sizing: border-box;
}

.horBlock {
    width: 50%;
    padding-top: 25%;
    vertical-align: top;
}

.verBlock {
    width: 25%;
    padding-top: 50%;
    vertical-align: top;
}

#javaBlock {
    border: 10px solid #FF7F00;
}

Plus all the borders and colors for the other blocks