QR Code Challenge by Mary Programms | HTML CSS

Hello everybody! This was my first challenge here, was a little bit confused if I should have done 2 versions - mobile and desktop - since in the figma file they both had the same measures.

I had 2 things that I couldn't do well: Situation 1: making the footer stay in it's place, no matter the screen size. Example - when I switched to another smaller size, a scrolling bar appeared.

Situation 2: margins - I learned that if two margins of elements next to each other is the same size, the margins "overlap", they don't add together - yet, on my file, they were adding to each other. Example - the bottom margin of the blue square and the top margin of the first text, they were both adding, creating a total of 48px margin, instead of 24px - is there an explanation for this? The margins shouldn't add together, right?

Not sure if this is the best way to make this text, but it was my first time! :)