Remove or blur line on horizontal scroll?

I'm working on a horizontal scrolling website utilizing "Skrollr." I am attempting to line up pictures and make a scrolling loop. However there seems to be a very thin white line in between the pictures regardless of what I do. Is there anyway to make the sections/pictures overlap by a few pixels or any other solution to solve this? I created a JSFiddle to demonstrate the problem. I've also listed my basic set up below.

https://jsfiddle.net/9xvu128g/

Update: This happens regardless of the images used see this 2nd JSFiddle: https://jsfiddle.net/9xvu128g/5/

#slides-container{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#slides{
width: 200%;
height: 200%;
position: fixed;
top: 0;
left: 0
}

here is the working fiddle. I gave a negative 1px margin-left to slide 2 and it solved the issue

https://jsfiddle.net/vndgqndc/

#slide-2{
    background: url('http://i.imgur.com/LLxbI.jpg') no-repeat center center;
    background-size: cover;
    -ms-transform: translate(100%, 0%); /* IE 9 */
    -webkit-transform: translate(100%, 0%); /* Chrome, Safari, Opera */
    transform: translate(100%, 0%);
     z-index: -1000;
     margin-left: -1px;
}

OR alternatively, you can set the translate to 99.9% as stated by Scott

#slide-2{
    background: url('http://i.imgur.com/LLxbI.jpg') no-repeat center center;
    background-size: cover;
    -ms-transform: translate(99.9%, 0%); /* IE 9 */
    -webkit-transform: translate(99.9%, 0%); /* Chrome, Safari, Opera */
    transform: translate(99.9%, 0%);
     z-index: -1000;
     margin-left: 0px;
}