Проблема в испытании "Наследование и каскадирование"

Курсы §16. Наследование и каскадирование
1

Здравствуйте!
Не срабатывает проверка. Результат похож на образец, но никакой реакции.
Прикладываю код:

html, body{
    margin:0;
    padding:0;
}
body{
    font-family:Tahoma, Arial, sans-serif;
    font-size:14px;
    width:550px;
    height:300px;
}
.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, .profile .info h2{
    margin:0 !important;
    padding:10px !important;
    font-size:12px ;
    font-weight:normal;
    background:#34495e;
    color:#fff;
    border-radius:4px;
}
.profile div .fact{
    padding:10px;
    background:white;
}
.info .fact:nth-child(odd){
    background:#ecf0f1;
}
.info .fact:after{
    content:"";
    clear:both;
    display:table;
}
.info .fact .title{
   float:left;
   width:120px;
   text-align:right;
   color:#7f8c8d;
}
.info .fact .value{
   margin-left:140px;
   color:#34495e;
}
 .albums {
    margin-top:5px !important;    
}
#miska,.albums img{
    float:left ;
    margin-right:5px ;
}
 .albums img:last-child {
    margin-right:0 !important;
}
.photo .button{
    display:block;
    height:30px;
    margin:5px 0;
    text-align:center;
    line-height:30px;
    color:#fff;
    border-radius:4px;
}
.photo .stroke{
    background:#3498db;
  
}
.photo .feed{
    background:#2ecc71;
}
.photo .startle{
    background:#e74c3c;
}

2

Используйте сервис codepen для отображения кода.

Что вы видите когда нажимаете на кнопку “Различия” ?

3

По скриншоту видны различия в границах у фото.

4

На эту кнопку давно не обращаю внимания т.к. даже в испытаниях где у меня получалась 100% точность, в окне “различия” всё было красным.

5

Но в задании же написано “Верните испорченные стили обратно, увеличив специфичность и приоритетность испорченных CSS-правил.” Т.е. свойства менять не нужно, или я не правильно понимаю?)

6

Ваша основная задача это сверстать пиксель верстку по образцу.

7

хорошо,спасибо

8

Приведите, пожалуйста, примеры таких испытаний и ваш код решений.

9

Помогите как сделать?
html, body{
margin:0;
padding:0;
}
body{
font-family:Tahoma, Arial, sans-serif;
font-size:12px;
width:550px;
height:300px;
}
.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;
}
.profile .info h2, #info-title{
margin:0 !important;
padding:10px !important;
font-size:12px;
font-weight:normal;
background:#34495e;
color:#fff;
border-radius:4px;
}
div.info .fact{
padding:10px;
background:white;
}
div.fact:nth-child(odd){
background:#ecf0f1;
}
.fact:after{
content:"";
clear:both;
display:table;
}
div.fact .title{
float:left;
width:120px;
text-align:right;
color:#7f8c8d;
}
div.fact .value{
margin-left:140px;
color:#34495e;
}
.albums{
margin-top:5px;
margin-bottom:5px;
}
.albums img{
float:left;
margin-right:5px;
}
.albums img:last-child{
margin-right:0;
}
span.button{
display:block;
height:30px;
margin:5px 0;
text-align:center;
line-height:30px;
color:#fff;
border-radius:4px;
}
.button.stroke{
background:#3498db;
}
.button.feed{
background:#2ecc71;
}
.button.startle{
background:#e74c3c;
}
.info .albums img, #miska{
margin:2px;
}

10

Прикрепите, пожалуйста, ваш CSS-код решения к посту.

11

прикрепил

12

Оу. ну есть же специальное “обрамление” - CTRL+K

html, body{
margin:0;
padding:0;
}
body{
font-family:Tahoma, Arial, sans-serif;
font-size:12px;
width:550px;
height:300px;
}
.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;
}
.profile .info h2, #info-title{
margin:0 !important;
padding:10px !important;
font-size:12px;
font-weight:normal;
background:#34495e;
color:#fff;
border-radius:4px;
}
div.info .fact{
padding:10px;
background:white;
}
div.fact:nth-child(odd){
background:#ecf0f1;
}
.fact:after{
content:"";
clear:both;
display:table;
}
div.fact .title{
float:left;
width:120px;
text-align:right;
color:#7f8c8d;
}
div.fact .value{
margin-left:140px;
color:#34495e;
}
.albums{
margin-top:5px;
margin-bottom:5px;
}
.albums img{
float:left;
margin-right:5px;
}
.albums img:last-child{
margin-right:0;
}
span.button{
display:block;
height:30px;
margin:5px 0;
text-align:center;
line-height:30px;
color:#fff;
border-radius:4px;
}
.button.stroke{
background:#3498db;
}
.button.feed{
background:#2ecc71;
}
.button.startle{
background:#e74c3c;
}
.info .albums img, #miska{
margin:2px; 
}
13

Всё. довольно просто.
Вы переопределяете несколько раз маргины, поэтому и не сходится. Просто способ с использованием !important’a

.albums img{
    float:left;
    margin-right:5px !important;
}
.albums img:last-child{
    margin-right:0 !important;
}

Но можно с использованием одного Жесткого переопределения:

.albums img {
    float:left;
    margin-right:0px !important;
}
.albums img + img {
    margin-left:5px;
}

Остается только удалить ваш код в конце и margin-bottom у .alboms (т.к. он вообще не нужен).

.info .albums img, #miska{
    margin:2px; 
}
1 лайк