Four card feature section

Hi Jyoti , I am Rahul. I think you have just started web development, there is no need to panic this is going to take time to understand many of the properties in CSS but that's okay with time you will see improvement in your code and will be able to understand all these properties , just keep reading articles, watch some videos in youtube, join some web development communities like available in slack or discord and keep asking questions. One thing I would like to focus on that whenever you have some issues related with your code then do google search since you already know it's the best place for getting answers.

Now let's come to the issues I found in your code , there are many but I would point just the important ones:-

1. By default all the browsers apply some margin and padding to html elements( tags) so you need to set them to 0 directly by mentioning it in the body selector or you can also use universal selector(*) .

i. Read about margin and padding here :-https://www.thoughtco.com/css-zero-out-margins-3464247 ii. Read about universal selector here :- https://www.geeksforgeeks.org/what-is-the-use-of-asterisk-selector-in-css/ iii. Read about box model and box-sizing here https://www.udacity.com/blog/2021/04/the-css-box-model-explained-for-beginners.html?utm_source=rss&utm_medium=rss&utm_campaign=the-css-box-model-explained-for-beginners

1. To align your "section" horizontally centered , you should specify a specific width to it and then set margin to 0 auto. Here are some resources related with this. Read here about margin:- https://stackoverflow.com/questions/3170772/what-does-auto-do-in-margin0-auto

Do google search for more details about it .

1. You need to grasp the concepts of grid system to align these cards properly , it's a huge topic and you will have to spend a lot of time to understand this. Read here about it https://css-tricks.com/snippets/css/complete-guide-grid/ You can download book based on grid system through the link I have provided below:- https://www.pdfdrive.com/grid-layout-in-css-interface-layout-for-the-web-e176071540.html (Here you can check out for other books if you want).

2. No need to use transform property , applying grid system will do the job .

I know there is a lot to read and also practice but these resources are definitely gonna be beneficial. here I have suggested some websites which will be quite helpful in your web development journey :-

https://css-tricks.com/ (it is a great site for css and there are great articles here.) https://stackoverflow.com/(it had answers for your 99% questions on web development) https://developer.mozilla.org/en-US/docs/Web/

That's all from my side, hope you become a great developer. Take Care and let me know you have something to ask.

okay! it looks better here but when I seeing the deployed version in GitHub, the alignment looks messed up. Is it a screen resolution glitch? can someone help me with that..?