Part of hover background coming through - html

Question

I have a hover effect that moves a new background-color over an existing one, making it appear the background is fading to the right. For some reason a bit of the background-color is showing on the left side of the blocks.
The only thing I could think of was my black border, but I have a border set in the elements natural style.
Does anyone know what is causing this?
#service-tabs-left {
float: left;
margin-left: 150px;
}
#service-tabs-right {
float: right;
margin-right: 150px;
}
.service-tab-block {
position: relative;
font-size: 1.6em;
padding: 1em 25px;
text-align: center;
display: block;
margin: 30px 0;
cursor: pointer;
border: 1px solid #838557;
background-image: linear-gradient(to right, #000 50%, #838557 50%);
background-size: 200% 100%;
background-repeat: no-repeat;
background-position: bottom right;
transition:width 0.2s ease;
-webkit-transition:width 0.2s ease;
}
.service-tab-block.active {
background: #000;
color: #FFF;
}
.service-tab-block:hover {
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
background-position: bottom left;
color: #FFF;
border: 1px solid #000;
}
<div id="service-tabs-left">
<h1 class="service-tab-block" id="service_tab1">DEMOLITION</h1>
<h1 class="service-tab-block" id="service_tab2">ENVIRONMENTAL SOLUTIONS</h1>
<h1 class="service-tab-block" id="service_tab3">CONCRETE CRUSHING</h1>
</div>
<div id="service-tabs-right">
<h1 class="service-tab-block" id="service_tab4">ASSET RECOVERY</h1>
<h1 class="service-tab-block" id="service_tab5">SCRAP METAL RECYCLING</h1>
<h1 class="service-tab-block" id="service_tab6">FOUNDATION REMOVAL</h1>
</div>

Answer 1

You have to change the background-size property from 200% to 201%. The extra 1% gives the cover you need.
https://jsfiddle.net/o7sxoton/

Answer 2

I fixed it by changing the linear gradient for black to 49% on .service-tab-block
BTW , this is one of those issues you can see by adjusting your browsers zoom for anyone who was wondering.
.service-tab-block {
background-image: linear-gradient(to right, #000 49%, #838557 50%);

Answer 3

Set this:
.service-tab-block{
box-sizing:border-box;
-moz-box-sizing:border-box;
}