3 Card Column with HTML-CSS challenge

Hi, I think You did a good job, what you have to fix is the positioning, and center everything so that it stops going from side to side and for that I think flexbox would work.

Happy Coding.

Hey great work on this. Though upon loading, I get this pushed layout which causes that scrollbar at the bottom which we really want to avoid at all times and the mobile state as well is destroyed.

Suggestions would be:

1. To fix the layout. First.

1.1. Remove the float: left on the different box.

1.2. Remove the margin-left on the .wrap-box selector and set display: flex on it.

1.3. Set display: grid; place-content: center; padding: 5rem 2rem; to the body tag to center the layout well and adding some paddings to it to prevent touching the sides, flooring and ceiling.

1. As mentioned by fellow FEM, add border-radius to the corners.

2. It will be better if you use h2 on the text title instead of h4. Though it is fine, but it is better to follow the ranking of the header tags right. Starting from h1 to h6.

3. This is really important. Make those breakpoints. Create breakpoints where you think that the layout is shifting or getting destroyed and apply some custom layout on it. Then your mobile state, do not just set it to the 375px range, that is only the design, phone nowadays have higher ppi than that, so it will better for you to set the mobile breakpoint range on point 400px - 410px.

If you need more help regarding those, just drop it here okay^

Hey Elia, nice work on submitting your first challenge!

Check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/gOgBrVP) for a suggestion on how to center everything horizontally and vertically - you can see the html and css and test til your heart's content. A border radius can be applied to a container wrapping the body contents to resolve the missing rounded corners.

Hopefully, this will help you along on your coding journey.