Hello need guidance please

I have already build the page twice, I passed the test, but the page doesn’t look the way i would like it to be.
What i need guidance with is this ; I don’t how to apply the right properties so the images with the text on the first flexbox i use can be align correctly . In other words what i would like is to have the image of MLB and the text along NHL and text on the top and then on the Bottom the NBA logo and text with the NFL logo and text. It has driving me crazy! I have tried to apply flex-wrap and other properties that at the end what i did was tuned them into comments

I also need please assistance on this other topic at the bottom I created the flexboxes but i don’t know what to do so the text inside doesn’t have all the margin on the left. I have tried everything i know and made research on but at this moment I just don’t see how to do it.

here is my repository if someone can please take a look and help I will really appreciate it.

this is my githubpage to show how it looks
https://cvilla714.github.io/landinpage/

Thanks in advance.

Personally, I would start over with your CSS. Start by designing for small widths . Narrow your web browser as far as it will go and style the page so that everything fits nicely (with no scroll bar at the bottom). That will be your default CSS. Then widen out the browser until you find a good break point and add a media query based on min-width and then style for the wider browser width. If you do this correctly you might find that you will need very few changes in the media query.

Here is an excellent resource for CSS Flexbox