four-card-feature-section-master

Hey, awesome work on this one. Desktop layout looks really nice, though when resizing the screen, the layout is being hidden thus creating horizontal scroll. It would be great to make the site more responsive. Mobile state looks great but your breakpoint of 375px is too little, other phones have higher width than that so they won't get the mobile layout, toning it up would be really great and also, using mobile first approach will be really great since it will help you addressed issues like this.

Ken already gave great feedback on this one, just going to add some other suggestions as well:

• The text Reliable, efficient delivery Powered by Technology should be using a single h1 on this one, since that is just a single phrase with the second part on the next row. Use h1 to wrap both and use max-width on it so that the text will wrap like on the design, adjust it until you get the desired look.
• When using a heading tag, make sure you are not skipping a level. If you use h4 then make sure that h1, h2, h3 are all present. Changing those other heading tags into using h2 would be great.
• Those 4 icons being are only decorative. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.
• Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.
• Lastly, making the site as responsive as you can so that you can avoid the issue when resizing the screen.

Aside from those, great job again on this one.

I would get rid of margin: 50px auto; styling on your main element. Instead I suggest doing:

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

which will center your content.

I would also give more of a gap between your containers in desktop view.

Other than that, your mobile layout looks great! I hope this helps.