Semantic HTML5 markup CSS custom properties Flexbox

Hi,

Good job on this one! There's a few things to keep in mind though:

1. It's usually better to avoid using fixed width. Instead, you could use max-width` (or the combination of the two). Using % to define the width of a component also isn't the best, as it will keep stretching on bigger screens (which isn't something you usually want). You could use px or rem instead.

2. I'd get rid of the height on the component (you'll rarely ever need to define height). Elements have a natural height, plus you can add padding to increase this. Your component's height should come only from these things.

3. Your component won't be centered vertically despite using align-items on the body if flexbox doesn't have a height to work with: applying min-height: 100vh will do the trick.

4. Regarding your HTML, I'd like to share two great videos on the topic: this and this. Both are videos by Kevin Powell about correct structure and using classes instead of IDs, etc. He explains the topic a lot better than I'd do so I suggest watching them, you'd learn some important concepts from him!

5. Your ID names: as mentioned above, you should use classes instead. It would also be helpful to give these classes descriptive names instead of "first" and "second", etc. It helps anyone trying to debug your code to navigate through it and in bigger projects, you'd help yourself too, to find what you're looking for.

6. The "Why Us" section would be better as a ul instead of a bunch of p tags.

7. Button: what I said about setting heights applies here to. Get rid of the height, and try to give it some padding to see what I meant! :)

There's definitely some room for improvement but it's great that you finished a challenge and submitted it ^^ Good luck with learning more and correcting whatever mistakes you made! :)

Hi AJAGUN, good job!

Flexbox aligns to the size of the parent container, You can use the vh measurement for the CSS height property to the body... Viewport Height handles the sizing of an element in relation to the height of the browser window.

I hope that helps!