Выравнивание котов,испытание наследование и каскадирование

Ребят не могу понять почему коты не выравниваются, помогите.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; } .info h2#info-title{ margin:0; padding:10px; font-size:12px; font-weight:normal; background:#34495e; color:#fff; border-radius:4px; } .profile .info .fact { padding:10px; background:white ; } .info .fact:nth-child(odd){ background:#ecf0f1; } .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 ; } #miska,.albums img { float:left ; margin-right:5px ; } .albums img:last-child{ margin-right:0 ; } .profile .button{ display:block; height:30px; margin:5px 0; text-align:center; line-height:30px; color:#fff; border-radius:4px; } .profile .stroke{ background:#3498db; } .profile .feed{ background:#2ecc71; } .profile .startle{ background:#e74c3c; }

разобрано

.albums {
margin-top: 60px;
} а если так написать.

И чем это вам поможет?

#miska

.info h2#info-title, h2 - проверь может это подойдет.

.info h2#info-title, h2{
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
} проверь это.

.info h2#info-title, h2{
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px !important;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

.albums {
margin-top: 5px;
} оставляем так.

.fact:nth-child(odd) {
background: #ecf0f1 !important; получилось 100% совпадение только пока !important 4 раза использовал.

.info .fact:nth-child(odd) {
background: #ecf0f1 ;
} От одной !important избавился.

Молодец) Еще от одной можно избавиться.

.info h2#info-title, h2{
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
} остается два !important;, кто знает есть ли решение без них?

Нет решения без них, потому что в HTML-коде есть стили прописанные через атрибут style.

1 лайк

Спасибо :slight_smile:

Почему в теоретической части не было упоминаний, что селекторы можно иногда писать через пробел, когда слитно, когда применять запятые?
Совершенно случайно написала в испытании h2#info-title , и внезапно картинка выровнялась!
По сравнению с предыдущими уроками, которые изложены просто на 5+, теория по CSS просто ставит в тупик.