Navbar элементы Распад к строке ниже после добавления эффектов

Question

Моего Navbar выглядел отлично: link

<ul> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
    </ul> 

После добавления эффекта парения, однако, элементы, кажется, получили невидимые дополнительные точки вправо, как так : link

<ul> 
    <li><a class="active her-buzz-out" href=" #home">Home</a></li> 
    <li><a class="her-buzz-out" href="#news">News</a></li> 
    <li><a class="her-buzz-out" href="#contact">Contact</a></li> 
    <li><a class="her-buzz-out" href="#about">About</a></li> 
    </ul> 

они не соответствуют должным образом больше, и любой попытке переместить их немного вправо приводит к дальнему элемента разрушаться в строку ниже ... Использование абсолютного положения не будет вариантом, потому что я нужно это быть относительным. Любые идеи о том, как я могу правильно подобрать элементы?

КСС на странице JS скрипку, к сожалению, библиотека эффектов на моем компьютере, так что я только в состоянии описать ошибку ...

Answer 1

Пожалуйста, дайте ему попробовать!

ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    width: 265px; 
 
    height: 2.45em; 
 
    margin: 5em; 
 
    border-radius: 500px; 
 
    background-color: #4da6ff; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    position: relative; 
 
    top: 10px; 
 
    left: 1px; 
 
    color: #4da6ff; 
 
    text-decoration: none; 
 
    padding: 8.5px 11px; 
 
    margin-left:2px; 
 
    width: 40%; 
 
    border-radius: 500px; 
 
    background-color: #ffffff; 
 
    transition:all 400ms linear; 
 
} 
 

 
/* Change the link color to #111 (black) on hover */ 
 
li a:hover { 
 
    background-color: #e6e6e6; 
 
    padding: 14px 20px; 
 
} 
 

 
.active { 
 
    background-color: #ffffff; 
 
    color: #4da6ff; 
 
} 
 
.out { 
 
    float: left; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    height: 100px; 
 
} 
 
.out { 
 
    float: left; 
 
    max-width: 70px; 
 
    overflow: hidden; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 
li a:hover .out{ 
 
     max-width: 70px; 
 
}

<ul> 
 
    <li><div class="out"><a class="active her-buzz-out" href=" #home">Home</a></div></li> 
 
    <li><div class="out"><a class="her-buzz-out" href="#news">News</a></div></li> 
 
    <li><div class="out"><a class="her-buzz-out" href="#contact">Contact</a></div></li> 
 
    <li><div class="out"><a class="her-buzz-out" href="#about">About</a></div></li> 
 
    </ul>