Карточка курса: требуется помощь

Помогите разобраться, что в этом задании я сделал не так, а то совсем голову сломал.

HTML:

 <!DOCTYPE html>
    <html>
        <head>
           <title>Испытание: карточка курса</title>
           <meta charset="utf-8">
        </head>
        <body>
            <div class="main">
            <h2>Курс &laquo;Фоны&raquo;</h2>
            <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
            <div class="share">  
                <a class="social social-fb"></a>
                <a class="social social-tw"></a>
                <a class="social social-gg"></a>
                
            </div>
            </div>
        </body>
    </html>

CSS:

html, body{
    margin:0;
    padding:0;
}
body{
    width:280px;
    min-height:280px;
    padding-top:20px;
    padding-left:20px;
    font-size:14px;
    font-family:"Arial", sans-serif;
    line-height:1.2;
    background:#ecf0f1;
}
.main{
    width:210px;
    background-color:#1abc9c;
    color:white;
    padding:10px 15px;
    
}
h2{
    font-weight:lighter;
    
}
.share{
    width:150px;
    }

.social{
    display:inline-block;
    width:30px;
    height:30px;
    background-color:#16a085;
    margin-right:5px;
    margin-bottom:5px;
    margin-top:15px;
  }
  
.social-fb{
 background-image:url('/assets/course14/social-challenge.png');
 }
.social-tw{
 background-image:url('/assets/course14/social-challenge.png');
 background-position:-30px 0;
 }
 .social-gg{
 background-image:url('/assets/course14/social-challenge.png');
 background-position:-60px 0;
 }
/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адрес картинки-спрайта:
/assets/course14/social-challenge.png
*/

У вас всё правильно по разметке.

Проблема в отступах, которые браузер добавляет параграфам p и заголовку по умолчанию. Попробуйте задать эти отступы самостоятельно.

В общем совет такой: уберите все отступы и последовательно задайте их заново сверху вниз =) Все должны быть кратны 5.

Кто-то подсказывает в комментариях? Откуда такое решение-то. Опять H2. Почему ?(
Почему-бы не сделать просто normal? :frowning:

Спасибо за подсказку, разобрался. Поигрался немного с отступами и … о чудо 93%)))

1 лайк

Часто приходится на глаз прикидывать, в двух окошках зачастую отображается по-разному - то как видит мой браузер и то, что хотели увидеть авторы задания. Поэтому, возможно у меня в стилях h2 появился и font-weight:lighter.

Не во всех шрифтах есть такой font-weight. Используйте стандартное обнуление font-weight:normal
Так же можно было без извращений взять H1)

Ребята, почему периодически я не могу ничего начать писать в коде?