Difference of pixel in border I can't figure where it is coming from - html

Question

Hi I'm doing a really simple navigator but I just came up into a strange problem I can't figure out where this is coming from.
My separations are not exactly till, they are created the same way..
Some are tougher than other and I don't get why.
Could it be due to the font ? I tried it with different browser and the problem is persistent...
JsFiddle There
The code is really simple :
HTML
<nav id="main-menu2">
<span class="fa fa-home"></span>
DERNIÈRES MINUTES
SÉJOURS
CROISIÈRES
CIRCUITS
FRANCE
WEEK-ENDS
VOYAGE À LA CARTE
PROMOS
</nav>
SCSS
$darkOrange: #ed6d00;
#main-menu2 {
background-color: $darkOrange;
width: 100%;
text-align: center;
font-size: 0.7em;
a{
color: #fff;
text-decoration: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
margin-left: -2px;
margin-right: -2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.3em;
line-height: 1.7em;
}
.fa-home{
font-size: 23px;
position: relative;
top: 2px;
}
}

Answer 1

I can't reproduce the bug, but I may have a solution : you're currently using borders that you don't need. Let me explain : there is a border right on Séjours and a border left on Croisières. So 2 borders, and you're currently hiding one of them.
Using font-size in em, makes your trick (margin-left / margin-right : -2px) unconsistent, because em can't really be converted into px (well it can, but it will depends on the browser calculation so you may need more than 2px to make a border go over another, maybe 1px maybe 1.5487px).
So, my solution : removes all the unecessary borders :
a {
border-left: 1px solid #fff;
}
a:last-child {
border-right: 1px solid #fff;
}
No more borders overlapping, more reliable solution.

Answer 2

Manage it with the font-size:
#main-menu2 {
font-size: 0;
}
#main-menu2 a {
font-size: 14.5px;
margin-left: -1px;
margin-right: 0;
}
The whole code:
$darkOrange: #ed6d00;
#main-menu2 {
background-color: $darkOrange;
width: 100%;
text-align: center;
font-size: 0;
a{
color: #fff;
text-decoration: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
margin-left: -1px;
padding-left: 10px;
padding-right: 10px;
font-size: 14.5px;
line-height: 1.7em;
}
.fa-home{
font-size: 23px;
position: relative;
top: 2px;
}
}
Demo: JSFiddle
It is because in your code you have some space by indent the text. Unfortunately all browsers interprete these content as white spaces and thus you have some gap between the elements.