Barre blanche de 1px edge animate/css sur chrome

Bonsoir,
je ne comprends pas, une petite barre blanche s'affiche en bordure de mon edge animate sur chrome, alors qu'elle n'apparaît pas sur Dreamweaver. Je suis embêté !
Voici mon code Html:
<div id="banniere_carte" class="EDGE-33308108">
<div id="bandeau_banniere">
Voir la situation de la maison de manière plus précise.
<a href="carte.html" class="bouton_bleu">La carte <img src="pictures/flecheblanchedroite.png" alt="" /></a>
</div>
</div>
Voici mon code css :
#banniere_carte {
border-left: 2px solid #6FA1BD;
border-right: 2px solid #6FA1BD;
width: 900px;}
.edgeLoad-EDGE-33308108 {
visibility: hidden;}
#bandeau_banniere {
position: absolute;
bottom: 0;
width: 99.5%;
height: 33px;
padding-top: 15px;
padding-left: 4px;
background-color: rgb(24,24,24); /* Pour les anciens navigateurs */
background-color: rgba(24,24,24,0.8);
color: white;
font-size: 0.9em;
visibility:visible;
z-index: 1; }

https://www.zupimages.net/viewer.php?id=14/09/r0m0.jpg
https://www.zupimages.net/

Voici deux liens qui montrent le problème sur chrome (avec la petite bande blanche à droite) et sur Dreamweaver (sans la petite bande)

Je viens de me rendre compte que l'image est décalée et empiète de 1px sur la bordure sur la gauche. Mais je ne sais toujours pas comment résoudre mon problème.

L'inspecteur d'élement de chrome me dit ceci :

<div id="banniere_carte__2012_0524yeu0009" class="banniere_carte__2012_0524yeu0009_id" style="position: absolute; margin: 0px; left: -1px; top: -143px; width: 901px; height: 691px; right: auto; bottom: auto; background-size: 100%; -webkit-background-size: 100%; background-image: url(file:///C:/Users/des%20Francs/Documents/Programmation/images/2012_0524yeu0009.JPG); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-position: 0px 0px; background-repeat: no-repeat no-repeat;"></div>

je vois que c'est décalé de -1px mais je ne sais pas comment le modifier dans mon code css car ça n'apparaît pas.