Откуда взялся отступ в навигационном меню?

Question

[Martyer]

Здравствуйте, откуда взялся отступ в меню(li первого блока не занимает всё пространство с начала навигации), три часа уже сижу ;\
Вроде бы каждому li заданна ширина 25%...
https://jsfiddle.net/4xoLb00n/

Answer 1

[Андрей]

Если речь идёт об отступе от верхнего края, то это стиль определённый в браузере. Чтобы его избежать, вам нужно добавить к .menu добавить margin: 0.

А вообще, по-хорошему, чтобы избежать подобных случаев, надо сбрасывать стили браузера добавив в самом начале css-правил

*{
margin: 0;
padding: 0;
/* и т.д. по необходимости */
}

Comments

[Martyer]

https://yadi.sk/i/cm-KucXVmzCXE Я об этом отступе слева.

[Андрей]

Martyer: это тоже встроенное в браузер css-свойство padding-inline-start: 40px

Решается добавлением к .menu правила padding-left: 0 (или просто padding: 0), либо с помощью глобального правила, о котором я написал выше

Answer 2

[Дмитрий Баракин]

Возможно решение не совсем то, которое вы ожидали (я это говорю, потому что пришлось использовать flex), но все же:

.menu-layer {
	height: 40px;
	width: 100%;
	max-width: 1200px;
	background: #575c62;
}

ul.menu li a{
 display: block;
 padding: 10px 0;
 text-decoration: none;
 font-weight: bold;
 font-size: 16px;
 color: white;
}

ul.menu {
  display: flex;
  padding: 0;
}

 ul.menu li {
  text-align: center;
  flex: 1 0;
  display: inline-block;
}