Батьківському div з класом box-page3 задала display: flex, що робить його гнучким, його дочірні div-1 i div-2 стали в ряд один за другим, властивість flex-wrap: wrap дає змогу переносити елементи на іншу строку,якщо не поміщаються в одну; justify-content: space-around рівномірно розподіляє простір між дочірніми елементами.
Для всіх елементів на сторінці вказана властивість box-sizing: border-box, це означає, що загальні задані ширина та висота елемента включають відступи та рамки. А для елементу div-2 я вказала властивість box-sizing: content-box, це означає, що задані ширина та висота елемента відносяться тільки до його вмісту, не рахуючи бордер та відступи, із-за чого контейнер div-2 став більший за розміром, ніж div-1.
Зміни у блоці div-1: Блочним елементам h2 і р, задала значення display: inline, із-за якого блочні елементи стали інлайновими, тому вони стали в ряд і ширину з висотою їм задавати не можна. А інлайн елементам span і а, задала значення display:block, із-за якого інлайн елементи стали блочними, тому вони тепер займають весь ряд і розташувались один під другим,тепер їм можна задавати ширину та висоту.
Зміни у блоці div-2: Блочним елементам h2 і р, задала значення display:none, із-за якого блочні елементи стали невидимими на сторінці і не займає місця, тому інші елементи їх ігнорують. А інлайн елементам span і а, задала значення display: inline-block, із-за якого інлайн елементи все так же йдуть один за другим , не займаючи весь ряд, але в плані ширини і висоти ведуть себе ,як блочні, завдяки чому їм можна задавати ширину і висоту.