20/28 96%, в чем ошибка?

Курсы §13. Мастерская: создаём меню
1

самый правый пункт меню Уже получается

html,
body {
margin: 0;
padding: 0;
}

body {
width: 430px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
.main-menu {
margin: 0;
list-style: none;
padding: 0;
}
.main-menu li {
display: inline-block;
}
.main-menu a {
display: block;
border-left: 2px solid #2c3e50;
background: #2980b9;
color: #ffffff;
margin-right: -5px;
text-decoration: none;
padding: 10px 15px
}
.main-menu .active a{
background: #1abc9c;
}

2

сделала через last child
.main-menu li:last-child {
padding-right: 25px;
background-color: #2980b9;}

стал шире, но недостаточно, а 30px уже слишком много

3

поменяла местами border и margin из св-в ссылки в li и вроде встало все на свои места, почему так?
и у других я не увидела last child в коде.
что то я запуталась
.main-menu li {
display: inline-block;
border-left: 2px solid #2c3e50;
margin-right: -5px;
}
.main-menu a {
display: block;

background: #2980b9;
color: #ffffff;

text-decoration: none;
padding: 10px 15px
4

Вы чётко представляете себе разницу между ul и его li?

5

думаю что ul это один большой блок, а li уже его составляющие

6

Логично! Ну, так что мешает Вам задать фоновый синий цвет всему большому блоку ul, а не li - его составляющим? Тогда совсем не нужно никаких last-child-ов…

7

html,
body {
margin: 0;
padding: 0;
}

body {
width: 430px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
.main-menu {
margin: 0;
list-style: none;
padding: 0;
}
ul{
background: #2980b9;
}

.main-menu li {
display: inline-block;
border-left: 2px solid #2c3e50;
margin-right: -5px;
}
.main-menu a {
display: block;
color: #ffffff;
text-decoration: none;
padding: 10px 15px
}
.active a{
background: #1abc9c;
}

вот так все получилось

спасибо!

8

Только зачем Вы сделали 2 класса для одного и того же объекта - .main-menu, а потом - ul? Это ведь одно и то же, подпишите цвет в .main-menu, а ul уберите…

9

да, точно! вроде теперь все уложилось в голове))
спасибо