Долго не могла собраться и ничего не получалось. В итоге поспала и уже на “свежую” голову процесс пошел лучше. Не без подглядываний, пыталась без !important выполнить задание, но не получалось. Спасибо большое Ineska за разъяснения со вторым h2. Собственно что получилось. Не уверена на счет кнопок, приписала .button ,но может, лучше было бы .photo? Да, так код сработал, но мне все же интересно ваше мнение.
html,
body {
margin: 0;
padding: 0;
}
body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}
.profile {
padding: 5px 10px;
}
.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}
.profile .photo {
float: left;
width: 152px;
}
.profile .info {
float: left;
width: 368px;
margin-left: 10px;
}
#info-title, .info h2 {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}
.profile div.fact {
padding: 10px;
background: white;
}
.profile div.fact:nth-child(odd) {
background: #ecf0f1;
}
.profile div.fact::after {
content: “”;
display: table;
clear: both;
}
.profile div.fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}
.profile div.fact .value {
margin-left: 140px;
color: #34495e;
}
.albums {
margin-top: 5px;
}
.albums img, #miska {
float:left;
margin-right:5px;
}
.albums img:last-child {
margin-right: 0;
}
.profile .photo .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}
.button.stroke {
background: #3498db;
}
.button.feed {
background: #2ecc71;
}
.button.startle {
background: #e74c3c;
}