one third container leaving white space at end css - html

Question

I have the following problem on a website i am building:
3 columns of equal height and 1/3 width but on the last column there is a small white gap on the right hand side. I cant figure out why, here is what I'm talking about:
enter image description here
See the white line by the right hand side of the blog image.
The code I'm am using for the 1/3rd column is:
.thirdBox {
float: left;
width: 33.33%;
width: calc(100% / 3);
padding: 20px 40px;
box-sizing: border-box;
min-height: 400px;
display: table;
}
and the background images:
.thirdBox:nth-of-type(3) {
background: url("imagelinkhere...") no-repeat 50% 50%;
background-size: cover;
}

Answer 1

The issue is that 100%/3 is 33.33% in most browsers, not quite the exact width you want it to be.
Instead of using calc() to find each table's width, I would use display:flex; on the parent of all three elements you want to be in one row.
This is the best I can help you with without any HTML structure. Please post that and I may be able to help you more.
.parentElement{
display:flex;
}
.firstBox, .secondBox, .thirdBox {
padding: 20px 40px;
flex:1;
}
.firstBox{
background:blue;
}
.secondBox{
background:red;
}
.thirdBox{
background:green;
}
<div class="parentElement">
<div class="firstBox"></div>
<div class="secondBox"></div>
<div class="thirdBox"></div>
</div>

Answer 2

Here is a solution using display: table:
<div class="row">
<div class="col">
<div class="col-inner">
<span>Menu</span>
</div>
</div>
<div class="col">
<div class="col-inner">
<p>Some text here</p>
</div>
</div>
<div class="col">
<div class="col-inner">
<span>Blog</span>
</div>
</div>
</div>
Css:
.row {
background-color: #999;
}
.row:after {
content: "";
display: table;
clear: both;
}
.col {
float: left;
width: 33.33%;
min-height: 400px;
}
.col-inner {
display: table;
width: 100%;
min-height: 400px;
box-sizing: border-box;
padding: 20px 40px;
}
.col:first-child,
.col:last-child {
background-color: yellow;
}
.col-inner span,
.col-inner p {
display: table-cell;
vertical-align: middle;
text-align: center;
}