8/23 решил,но смотрю другие решения и думаю теперь как правильно нужно было сдеать.

8/23 решил,но смотрю другие решения и думаю теперь как правильно нужно было сделать с точки зрения адаптивности и прочего.

/* Базовые стили, изменять не нужно */

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

body {
position: relative;
width: 540px;
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 {
box-sizing: border-box;
position: absolute;
width: 200px;
height: 40px;
}
.block2 {
box-sizing: border-box;
position: absolute;
width: 140px;
height: 60px;
margin: 60px 270px 0px 120px;
padding: 10px 50px 30px 40px;
}
.block3 {
box-sizing: border-box;
position: absolute;
width: 200px;
height: 60px;
margin: 140px 260px 100px 20px;
padding: 5px 120px 30px 5px;
border: 12px solid #fff;
}

А для чего Вам в данном задании адаптивность? Или Вы делаете где-то за пределами HTML Academy? Если Вы идёте с начала, как новичок, здесь всё решается простыми расчётами по схеме блочной модели. Какую коррекцию Вы хотите получить здесь?

“Адаптивности”?)
Явно не здесь. Сначала фиксированные сетки нужно научиться строить.
box-sizing конечно к месту в этом задании. Но position: absolute; - зачем, тем более без координат? Это стандартная блочная модель, вы изучаете поток документа.
Внешние отступы справа писать не обязательно. При проверке это никак не влияет, но так лучше не делать.

1 лайк