20/28 100% Но можно ли бым было использовать padding?

.main-menu {
margin: 0;
padding: 0;
background: #2980b9;
margin-left: 2px;
padding-left: 3px;
}

.main-menu li {
border-left: 2px solid #2c3e50;
display: inline-block;
margin-left: -5px;
}

.main-menu a {
color: #ffffff;
display: block;
text-decoration: none;
padding: 10px 15px;
}

.main-menu .active a {
background: #1abc9c;

}

Переделал на
.main-menu {
margin: 0;
padding: 0;
background: #2980b9;
padding-left: 5px;
} результат тот же но можно ли использовать padding при создание меню?

Зачем разделили? По условию размеры всех отступов кратны пяти.

я исправил на padding-left: 5px; но вопрос в том что правильно ли так или лучше избегать?

C margin-left: 5px; такой пробел вылазил

Можно было сделать так, как вы сделали, но красивее и чище код здесь: Испытание 20/28 100% и ничего лишнего