Помощь в верстке меню

При наведении на ссылки меню появляется рамка пункта меню, но при этом немного остальные пункты смещаются налево и направо. Как это исправить, чтобы при наведении просто появлялась рамка и пункты не смещались?

`

Тест
`

.main .menu-top-content { width: 100%; height: 50px; border-top: 2px solid #000; border-bottom: 2px solid #000; text-align: center; background-color: #0B0B3B; } .main .menu-top li { display: inline-block; list-style: none; } .main .menu-top a { display: block; padding: 6px; margin-top: -10px; margin-left: 15px; text-decoration: none; font-family: 'century gothic', sans-serif; font-size: 16px; color: #fff; } .main .menu-top a:hover { border: 1px solid #6E6E6E; border-radius: 15px; }

Можно добавить прозрачную рамку.
.main .menu-top a {
border: 1px solid transparent;
}

2 лайка

Спасибо большое, помогло)