I make of css flex to arrange the scan area at the middle

Hello SAMUEL MAKINDE

This is a great submission, I just want to give some feedback:

Please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like

1. nav
2. main
3. footer
4. aside etc.

For your project I would just replace the direct children of the body (the two divs) into main and footer respectfully. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks.

A piece of advice for the image. You don't have to change the height of an image all the time since it (USUALLY) scales with the width like yours, remove the height and you will see no difference.

Also try using % on the image so you don't have to guess the size every time, I used the width:100% and it looked the same but much easier to manage.

Hope this helped.

Replace<div class="main-body">with the main tag, <h2> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

To center .main-body on the page using flexbox, replace the height in the body with min-height: 100vh.

There is no need to give .main-body a height value rather increase the padding value for all the sides. padding: 16px. Give the img a max-width of 100% for a responsive image instead of a width and height values.

For a responsive content that wont-require a media query for this challenge replace the width of .main-body with max-width. max-width: 300px

Give h1 and p the same font-size of 15px and the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING