Stretching horizontal divs (middle div stretches) - html

Question

I would like to create a header that streatches with the page width.
My header consists of three parts, two sides with fixed width and the middle that stretches.
<div class="bigBlueBox">
<div class="headerBox">
<div class="leftSide"></div>
<div class="middleSide"></div>
<div class="rightSide"></div>
</div>
</div>
I use display: box and box-flex: 1 for the stretching of the middle box.
body {
margin: 0;
padding: 0;
}
.bigBlueBox {
height: 45px;
width: 100%;
background-color: blue;
}
.headerBox {
border: 1px solid red;
color: #FFFFFF;
display: -moz-box;
font-weight: bold;
height: 45px;
margin: auto;
width: 100%;
}
.leftSide {
border: 1px solid yellow;
display: inline-block;
float: left;
height: 45px;
width: 20px;
}
.middleSide {
-moz-box-flex: 1;
display: inline-block;
float: left;
height: 45px;
}
.rightSide {
border: 1px solid green;
display: inline-block;
float: left;
height: 45px;
width: 20px;
}
My problem is that, as you can see in this fiddle, there's a margin I can't get rid of (the red border is not around the blue box).
How can I remove this "margin" ?
Otherwise, is there another way to do it without using boxes ?

Answer 1

Well the solution was very simple, I just had to add some content inside the middle div:
<div class="bigBlueBox">
<div class="headerBox">
<div class="leftSide"></div>
<div class="middleSide"> SOMETHING </div>
<div class="rightSide"></div>
</div>
</div>
Which could also be