Не могу убрать падинги у li

[viliksar]

Верстаю такой хедер и столкнулся с двумя проблемами

 

- Не могу понять почему между li разные падинги, например в Home с права большой паддинг, тогда как значения задал всем li общее

- И еще у класса activ слева до рамки пустое место, не как не могу понять за счет чего оно образовалось

https://jsfiddle.net/y5dmrL81/

 

[AlexZaw]

Если вы сделаете активным другой пункт меню, то будет тоже самое, так что это не Home виноват :)
Это пустое место, как и "большой паддинг" образуется из-за дефолтных отступов между инлайновыми элементами.

Задайте для .main-menu размер шрифта ноль, а для .main-menu li установите нужный размер шрифта. Сразу же пропадут лишние отступы

[spdif]

Можно решить это убрав пустые текстовые узлы: 

убираем между тегами пробелы, переносы, табы - получаем запись такого вида 

<ul class="main-menu"><li class="homepage">Home</li><li class="gallerypage activ">Gallery</li><li class="memberspage">Members</li><li class="logoutpage">Logout</li></ul>

результат - https://jsfiddle.net/spdif/g4cfkbms/1/ 

Ещё 

Можно решить не убирая пустые узлы HTML5: 

убираем закрывающие теги - получаем запись такого вида 

<ul class="main-menu">
    <li class="homepage">Home 
    <li class="gallerypage activ">Gallery 
    <li class="memberspage">Members 
    <li class="logoutpage">Logout 
</ul>

в HTML5 это вполне валидная запись кода 

результат - https://jsfiddle.net/spdif/hcoaz0r9/2/ 

...