Хорошо. Давайте разберем один элемент.
Начнем с этого правила, написанного в html-коде:
#info-title, .profile .button {
background: #4dfe15;
}
Вы могли заметить, что здесь два селектора написаны через запятую, а значит заданный внутри фоновый цвет относится к двум разным элементам. Он относится к кнопкам (которые вы исправили сами) и к элементу с #info-title.
Находим в html-коде такой элемент:
<h2 id="info-title">Общая информация</h2>
Это заголовок. Далее находим в css-коде правило, отвечающее за стили заголовка:
.info h2 {
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}
Селектор в этом правиле нам и нужно усилить. Но сначала обратим внимание, что это правило относится не только к одному заголовку. Есть еще один заголовок - “Альбомы”. Его мы тоже должны учесть.
Поэтому будем писать через запятую.
В правиле в html-коде использован селектор по id. Чтобы добиться большего уровня специфичности нам ничего не остается, как тоже использовать #info-title:
#info-title, .info h2 {
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}
Теперь с первым заголовком всё в порядке. Но что на счет второго?
<h2 style="margin-top:-50px;padding:0;">Альбомы</h2>
Здесь стили написаны в атрибуте style. Из теории мы с вами знаем, что переопределить стили, написанные в атрибуте style можно только одним способом - с помощью !important.
#info-title, .info h2 {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}
Дальше сами.