Erro hover

Bom pessoal to tentando colocar aquele efeito do hover que quando passa o mouse o fundo em volta do texto

muda de cor só que estou com um probleminha:

Quero que ele fique certinho mais ele fica assim:

http://prnt.sc/f1olv

CSS

.menu-atendimento {position: relative; width: 100%; height: 40px; background-color: #282828; font-size: 1em;}
.menu-atendimento h2 {position: relative; float: left; padding-left: 30px; padding-top: 10px; color: #0294c4; cursor: default;}
.menu-atendimento ul li {position: relative; float: right; padding-right: 100px; padding-top: 10px;}
.menu-atendimento ul li a {color: #0294c4;}

.menu-atendimento ul li:hover{background-color: #fff;}