css div left and right unwanted line

I am trying to do a bit customizing based on the Twenty Thirteen theme.
I made also customized the footer, also inserted a div that should seperate it.
As can be seen there white thin lines on the left and right of the div, as i zoom in they disappear. I dont really have a clue what causes that.

footer code

    <?php
/**
 * The template for displaying the footer
 *
 * Contains footer content and the closing of the #main and #page div elements.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
?>

    </div><!-- #main -->
    <div id="footer-separator"></div>
    <footer id="colophon" class="site-footer" role="contentinfo">

        <div class="site-info">
        </div><!-- .site-info -->
    </footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>

as well as the css

#footer-separator {
height: 20px;
width: auto;
background-color: #383b3a;
}

Would appreciate a hint how to get rid of those lines.