Как Стиль Социальные медиа Links Правильно

Question

Link To Website

Пожалуйста, смотрите ссылки в социальных сетях в меню Nav. Вы заметите, что когда вы наводите курсор на другие ссылки в меню Nav, их шрифт меняет цвета, но когда вы наводите курсор на ссылки в социальных сетях, их фоновое дополнение увеличивается, и они переходят в сторону - это не то, что я хотеть. Все, что я хочу, это ссылки для заполнения тем же самым голубым цветом, что и другие ссылки в меню Nav (# 76abdc), когда вы наводите на них курсор. Так, например, значок «f» в значке Facebook будет заполнен # 76abdc, птица в значке Twitter будет заполнена # 76abdc, а значок «in» в значке LinkedIn также будет заполнен # 76abdc.

Я лично не знаю, как был применен этот стиль (я не разрабатывал эту часть сайта), но я знаю, что он использует шрифт - удивительный, и вы можете просматривать следующие стили, когда вы принудительно: парить над этими классами:

.secondary-navbar .navbar-nav > li > a:hover { 
    background-color: #fff; 
    border-radius: 5px; 
    color: #1971b9; 
    font-weight: bold; 
    font-size: 120%; 
    text-transform: uppercase; 
    margin: 13px 12px 0; 
} 

.secondary-navbar .social-links > li > a:hover, .secondary-navbar 
.social-links > li > a:focus { 
    margin: 13px 0 0 !important; 
    padding: 2px 5px !important; 
    background-color: #1971b9 !important; 
    color: #fff!important; 
    font-size: 180%!important; 
    margin-right: -10px; 
} 

Я пытался избавиться от прокладки

padding: 2px 5px !important; 

Но это на самом деле, кажется, увеличивает отступы (???)

В Appearance -> Виджеты (это WordPress сайт, кстати), я могу также видеть, что HTML для «Header социальных медиа» выглядит следующим образом:

<ul class="nav navbar-nav navbar-right social-links hidden-xs hidden- 
sm"> 
    <li> 
     <a href="#"> 
     <i class="fa fa-facebook-square" aria-hidden="true"></i> 
     </a> 
    </li> 

    <li> 
     <a href="#"> 
     <i class="fa fa-twitter-square" aria-hidden="true"></i> 
     </a> 
    </li> 

    <li> 
     <a href="#"> 
     <i class="fa fa-linkedin-square" aria-hidden="true"></i> 
     </a> 
    </li> 
</ul> 

мне нужно делать изменить что-либо здесь или в CSS? Как? Спасибо!

EDIT - Обновлен CSS:

.secondary-navbar .social-links > li > a { 
    /*margin: 13px 0 0;*/ 
    margin: 13px 5px 0; 
    padding: 2px 5px; 
    background-color: #1a3664; 
    color: #fff; 
    font-size: 180%; 
    /*margin-right:-10px;*/ 
    /*padding: 2px 5px !important;*/ 
    padding: 0px !important; 

} 

.secondary-navbar .social-links > li > a:hover , 
.secondary-navbar .social-links > li > a:focus { 
    /*margin: 13px 0 0 !important;*/ 
    margin: 13px 5px 0!imporant; 
    /*padding: 2px 5px !important;*/ 
    padding: 0px !important; 
    background-color: #1971b9 !important; 
    color: #fff!important; 
    font-size: 180%!important; 
    margin-right:-10px; 
} 

Answer 1

.secondary-navbar .social-links > li > a { 
    margin: 13px 5px 0; 
    padding: 2px 5px; 
    background-color: #1a3664; 
    color: #fff; 
    font-size: 180%; 
    /* margin-right: -10px; */ 
    padding: 0px !important; 
} 

and on hover social links 



.secondary-navbar .social-links > li > a:hover, .secondary-navbar .social-links > li > a:focus { 
    margin: 13px 5px 0 !important; 
    padding: 0px !important; 
    background-color: #1971b9 !important; 
    color: #fff!important; 
    font-size: 180%!important; 
    margin-right: -10px;} 

Попробуйте удалить margin-right и добавить padding: 0px !important в социальные связи и дать запас ему