'How do I align this flex grid more evenly?

I have a flex grid with 4 boxes under "Our Services". Site is located here:

My HTML and CSS code is on the site: https://cleanautoinfo.com/surechoice/#services

I am having a hard time formatting it for StackOverflow because the code is already reformatted and it keeps adding cleartext from the code into stackoverflow.



Solution 1:[1]

ctrl+shift+i or F12 or inspect element tool on most browsers is a powerful tool to debug elements. If you inspect on the website itself there's a utility class for margin-top that's causing the misalignment. See picture below:

the problem

You can either remove mt-md-5 on that div or add the same utility class to your other div.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nice Books