Первое испытание

html,
body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 290px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.block1 {
height: 36px;
width: 196px;
}

.block2 {
width: 96px;
height: 46px;
padding: 10px 0 0 40px;
margin: 20px 0 0 120px;
}

.block3 {
width: 171px;
height: 32px;
border: 12px solid white;
padding: 4px 0 0 5px;
margin: 20px 0 0 20px;
}

%скажите, плиз, что не так. При нажатии на “Различия” закрашивает правую область в красный цвет. Не могу найти ошибку :pensive:
Вот скрины

Не надо менять ширину для body. Изначально было 540px, а у вас получилось 280px…
И поправьте надпись “Блок 3”, там буквально пиксель сверху и высота чуть поменяется.

1 лайк

Спасибо

Вот 100% результат.
.block1 {
width: 196px;
height: 36px
}
.block2 {
margin: 20px 120px;
width: 96px;
height: 46px;
padding-top: 10px;
padding-left: 40px;
}
.block3 {
width: 166px;
height: 26px;
border: 12px solid;
margin: 0 20px;
padding: 5px;
}

хмм…
А у меня в третьем блоке высота и ширина отличаются от ваших.
.block3 { width: 171px; height: 31px; margin-left: 20px; border-width: 12px; padding-top: 5px; padding-left: 5px; }
тем не менее проверку прошел.