Social Proof Section using HTML and SASS (SCSS)

Hi Joseph,

Your Design look really nice. I looked in your Code and I have some ideas you can make it better.

1. Based on Style Guide size for the Desktop should be 1440px. I see in your Code .main that you used 1300px.

2. .main can be flexbox with flex-direction: column. This way your <div class="main__top"> and <div class="main__bottom"> can be inside this flexbox.

3. .card you use margin: 4.3rem 0; then margin: 2rem 2rem; then margin: 0 0 1rem 0;. This is little not consistent. Try to make right/left margin for each .card and extra top or bottom margin to move them. e.g. 01-margin: 0px 20px 0px;, 02-margin: 20px 20px 0px;, 03-margin: 40px 20px 0px;.

4. On mobile this part is not centered

<div class="asides">
          <aside class="asides__aside"><span class="asides__aside-stars"></span>Rated 5 Stars in Reviews</aside>
          <aside class="asides__aside"><span class="asides__aside-stars"></span>Rated 5 Stars in Report Guru</aside>
          <aside class="asides__aside"><span class="asides__aside-stars"></span>Rated 5 Stars in BestTech</aside>
        </div>

Try to work with that to make Stars and Text centered on mobile.

I hope this will help you a little with your Design.

Happy Coding :-B