Last row of inline-block divs is shifted right - html

Question

I have googled and searched on SO about this issue, and I just cant fix it.
It is really, really annoying and driving me crazy!!
I have a menu that is made up of several blocks. These are created by divs with display: inline-block
I have also tried float:left, but I need these all centered on the screen and this doesn't work.
With my inline-block, it works fine and adjusts to the size of the screen by making more rows - but the last row is always offset by 2 pixels!
This is my code and css...
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
.menublock {
width: 170px;
height: 150px;
margin: 0px;
padding: 0px;
display: inline-block;
background: #0074bc;
color: #fff;
cursor: pointer;
vertical-align: top;
}
.menublock-inner {
padding-top: 30px;
}
And the result is...

Answer 1

Take a look at this old link always gets me:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
So id do mine a little different like:
body {
background: #000;
}
.wrapper {
margin: 30px auto;
padding: 0;
text-align: center;
width: 100%;
max-width: 610px;
}
.menublock {
margin: 0;
padding: 0;
display: inline-block;
}
.menublock-inner {
margin: 0;
padding: 0;
display: table;
vertical-align: middle;
background: rgba(0,94, 184, 1);
height: 200px;
width: 200px;
}
.icon {
margin: 0;
padding: 0;
display: table-cell;
vertical-align: middle;
}
.fa {
}
span {
padding-top: 5px;
display: block;
color: white;
text-transform: uppercase;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="wrapper">
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
</div>
<!-- eo: wrapper -->