Испытание 20/28 - 99% Нужный пиксель переносит меню

Здравствуйте. Не могу понять в чем дело. При условии
.main-menu li:last-child a{
padding-right: 39px;
}
Ставит 99%

Если же ставлю отступ 40px, то последний пункт меню “Достижения” при проверке переносится на следующую строку, и задание не защитывается, хотя на экране всё отлично
На картинке вид при 40px до проверки и отличие при 39px после проверки.

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{
list-style: none;
padding: 0;
margin: 0;
margin-left: 5px;
}

.main-menu li{
display: inline-block;
}

.main-menu a{
color: #ffffff;
text-decoration: none;
display: block;
background: #2980b9;
padding: 10px 15px;
border-left: 2px solid #2c3e50;
margin-left: -5px;
}

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

.main-menu li:last-child a{
padding-right: 39px;
}

Переделайте на margin-right.

переделал на margin-right. В браузере всё без изменений

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

  1. margin-right: -1px задать для a
  2. margin-right: -4px задать для li
  3. background: #2980b9 - для .main-menu (тогда ячейка “достижения” станет как бы шире).
    Именно о таких отступах говорилось в этом же курсе, в предыдущем задании (в задании до этого испытания). Margin-right: -4px как бы убирает пробел между li, поскольку для горизонтального меню вы задаете inline-block (и здесь между блоками ставится пробел, как пробел между обычными словами, от которого как раз и нужно избавиться).

Спасибо. Насчет отрицательных маргинов я протормозил, неправильно задание прочитал. Зашел на страничку переделать испытание, а защитано уже 100%. Чудеса.

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 {
padding: 0;
margin: 0;
list-style: none;
background-color: #2980b9;
margin-left: 5px;
}
.main-menu li {
display: inline-block;
}
.main-menu a {
background-color: #2980b9;
text-decoration: none;
display: block;
color: #ffffff;
border-left: 2px solid #2c3e50;
padding: 10px 15px;
white-space: nowrap;
margin-left: -5px;
}
.main-menu>.active>a {
background-color: #1abc9c;
}
a:hover {
background-color: #1abc9c;
}