Skilled elearning landing page

Struggling a lot with positioning, i don't know how to make a consistent container that puts all my elements together without "distorting" them and keeping the space they have while using responsiveness behavior. I need any information to help me with that .

For example, how should i put the padding? For body or for the container-body? ?r i should put on each individual element (look to my footer and header on this project)? If i define my padding on body, sometimes my elements with defined margins or widths or paddings, like the .cards, overflow the body or it's container...

I wished i could have a standard way to write my initial setup on css, and guarantee that all the elements will fit inside it or it's containers and that the container will grow with my elements all together.(BTW i learn this languages by myself so its hard to find consistent content that teach systematically to achieve autonomy).

Even if you guys could teach me just a way, an approach, i will be tremendously thankfull

About those images "floating", how can i put them (any kind of image that overflows the body" on screen without the odd behavior while responsiveness is used. Please, anyone help me.

Well, i will keep trying. See you around.. Thx so much