Part $3$ Style the main area

Select the main element

set the background color to white

set the width to $90\%$

set the max width to $1000px.$ This will stop the element from expanding too much on a

large screen

center the main element

set a $1$rem padding on the top, the bottom and the left, and a $0$ padding on the right

Select all h$2$ elements

o set the font color to #ffba$00$

set a $0\mathrm{.}5$ rem margin on the top and the bottom.

Select all image elements

set the maximum width to $100\%.$ This allows the image to have a fixed width of $400$ px $($as

set in the html document$)$ when there are enough space. It also allows the image to scale

smaller when the viewport size decreases without overflowing.

set the height to auto so that the images scale proportionally

add a box shadow, with a $0$px x$-$offset, a $10$px y$-$offset, a $6$px blur radius, a $-6$px spread

radius, and of color #$6$d$9773.$ This gives a shadow like effect to the picture.

Save your changes. Open Chrome DevTools and click the 'Toggle device toolbar' button $$ to

check the page with different screen dimensions.