Why is my image element and card element fixated the way that they are?

HTML-CSS
1

Here’s the code: https://code.sololearn.com/WM9dwXF7xfZM
I want the shoe image and the card to be next to each other. I’ve tried changing the margin and everything. I’m at a loss. What is it?
nike2

2

Please do not paste images of code. Paste as much code as necessary to reproduce the problem. You are much more likely to get help that way.

3

You can use grid to place them next to each other.

4

Ok I linked my public code so you or whoever can take a look

5

I’ll start looking into the grid now, but in the meantime can you explain why they ended up like that?