Слишком длинный в CSS3

Question

Я не могу понять, почему он длиннее текста с левой стороны. То же самое для остальных пунктов меню.

Это то, что выглядит моя надпись.

Fiddle

Вот HTML списка:

<ul class="menu"> 
    <li><a href ="index.html">Home</a></li> 
    <li><a href="#">About stuff</a></li> 
</ul> 

Вот соответствующий CSS:

ul.menu { 
    list-style-type: none; 
    text-align: center; 
    text-color: 000000; 
    word-spacing: 0.3em; 
    letter-spacing: 0.5em; 
    line-height: 120%; 
    text-decoration: overline; 
    text-transform: lowercase; 
    text-shadow: 0.04em 0.04em #000000; 
} 

Answer 1

Удалите text-decoration: overline; из ul.menu и положить его в li.

Смотрите мой сниппет:

ul.menu { 
 
    list-style-type: none; 
 
    text-align: center; 
 
    text-color: 000000; 
 
    word-spacing: 0.3em; 
 
    letter-spacing: 0.5em; 
 
    line-height: 120%; 
 
    text-transform: lowercase; 
 
    text-shadow: 0.04em 0.04em #000000; 
 
} 
 

 
li { 
 
    text-decoration: overline; 
 
    display: inline-block; 
 
}

<ul class="menu"> 
 
    <li><a href ="index.html">Home</a></li> 
 
    <li><a href="#">About stuff</a></li> 
 
</ul>