Испытание 9/18 - 96%. Правильный ли в целом подход ?

Курсы §14. Мастерская: декоративные элементы
1 
<body>
            <div class="bg-gr">
            <div class="main-bl">
                <p class="h2">Курс &laquo;Фоны&raquo;</p>
                <p class="text">Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
                <ul class="soc">
                    <li class="fb"><a href=""></a></li>
                    <li class="tw"><a href=""></a></li>
                    <li class="goo"><a href=""></a></li>
                </ul>
            </div>
            </div>
</body>

CSS:
html,
body {
margin: 0;
padding: 0;
}
body {
width: 300px;
min-height: 280px;
font-size: 14px;
font-family: “Arial”, sans-serif;
line-height: 1.2;
}
.bg-gr {
background: #ecf0f1;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 30px;
}
.main-bl {
background-color: #1abc9c;
color: white;
padding: 5px 20px 0 20px;
width: 200px
}
.h2 {
font-size: 20px;
margin: 15px 0;
}
.text {
margin: 20px 0;
}
.soc {
margin-left: -40px;
margin-top: 25px;
}
.soc li {
display: inline-block;
margin-right: 5px;
margin-bottom: 15px;
}
.soc li a {
display: block;
background-color: #16a085;
width: 30px;
height: 30px;
}
.soc .fb a {
background-image: url(/assets/course14/social-challenge.png);
background-repeat: no-repeat;
}
.soc .tw a {
background-image: url(/assets/course14/social-challenge.png);
background-repeat: no-repeat;
background-position: -30px 0;
}
.soc .goo a {
background-image: url(/assets/course14/social-challenge.png);
background-repeat: no-repeat;
background-position: -60px 0;
}
Прокомментируйте, пожалуйста, правильный ли подход?

  1. Для серого фона создал дополнительный
    и в стилях залез в body. можно ли обойтись без этого? если да, то как будет правильней?
  2. 96% из-за нижней границы. правильно ли делать внешний отступ от списка <li> или от <a>? или главное, чтобы сошлось?
    Заранее спасибо.
2

Что-то не так, правда?
Есть ошибки:

  1. Семантика кода. Выделенный фрагмент - это явный заголовок, а не параграф.
  2. Не обнулили отступы у списка. Отсюда некрасивый отрицательный отступ в 40px.
  3. При использовании спрайта картинка загружается один раз. У вас - для каждой иконки отдельно.
3

Спасибо за ответ.
а по поводу серого фона?

4

Если я правильно помню, то изначально серый фон был задан для body. Этого было вполне достаточно для этого задания.

5

т.е. белый фон как в образце делать не надо? :slight_smile:
терь понятно, что с отступами намудрил недоработал походу.
Еще раз спасибо за ответы.