Испытание 20/28

Курсы §13. Мастерская: создаём меню
1 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: горизонтальное меню</title>
    </head>
    <body>
        <ul class="main-menu">
            <li><a href="/courses">Курсы</a></li>
            <li><a href="/demos">Демонстрации</a></li>
            <li class="active"><a href="/public_profiles">Участники</a></li>
            <li><a href="/achievements">Достижения</a></li>
        </ul>
    </body>
</html>
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: 0px; 
    
}
.main-menu li {
    display: inline;
    padding: 10px;
    background: #2980B9;
    margin-right: -4px;
    border-left: 2px solid #2C3E50;
}
.main-menu a {
    
text-decoration: none;
color: #FFFFFF;
}
.main-menu .active  {
    background: #1ABC9C;     
}

Только на 91%, помогите, в чем причина?

2

Все несоответствия видны во вкладке “Различия”.
Ну, во-первых, размеры пунктов меню не соответствуют образцу. Для main-menu надо обнулить еще и внешние отступы. Пунктам меню лучше задать display:inline-block;
Отрицательный отступ у меня получился 5px.
Пробуйте,

1 лайк
3

Сделал, сдвинулось на 92%

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: 0px;
    margin: 0px;
}
.main-menu li {
    display:inline-block;
    padding: 10px;
    background: #2980B9;
    margin-right: -5px;
    border-left: 2px solid #2C3E50;
    
}
.main-menu a {
    
text-decoration: none;
color: #FFFFFF;

}
.main-menu .active  {
    background: #1ABC9C;     
}
4

еще сделал padding: 10px 15px у li, стало 96%

5

Хорошо. Обратите внимание на вкладку “Различия”. Вам осталось добавить фон для .main-menu, такой как и цвет у самих пунктов меню.

1 лайк
6

Благодарю!