горизонтальное меню 20/28

Что не так?
Правильность 93%

.main-menu {
padding: 0;
margin: 0;
}
.main-menu li{
display: inline-block;
}
.main-menu a {
display: block;
text-decoration: none;
background: #2980b9;
color: white;
padding: 10px 15px;
border-left: solid black 2px;
margin-left: -5px;
}
.main-menu >.active> a {
background: #1abc9c;
}

https://prnt.sc/fxzddl

Необходимо:

  1. Дописать в .main-menu боковые отступы: padding: 0 5px;
  2. Не самоуправничать в выборе цвета - у Вас в условии задания не black для границ, а #2c3e50;
  3. Задать синий цвет на фон не для каждой из ссылок .main-menu a, а для всего списка .main-menu.
    Из других пожеланий - всё же привыкать к формату свойств:
    border: 2px solid #2c3e50; (т.е. сначала толщина, потом непрерывность, затем цвет);
1 лайк

Благодарю за рекомендации. Всё сработало!