You're on the right track! The issue likely comes from a mix of positioning methods and percentages that don’t scale well together. Here are a few key fixes:

1. Fixing Center Alignment Use display: flex and justify-content: center on the container that holds both .socials and #magicbox.

2. Keeping the Figure Under the Socials Instead of using bottom: -45px; on .footer, try adding margin-top to #magicbox. Use position: absolute only if necessary; otherwise, flexbox or grid will be more predictable.

3. Making It Responsive Instead of left: 35% in #magicbox, use margin: auto and text-align: center to keep it in place.

   .hiddenBottom { display: flex; flex-direction: column; align-items: center; }

   .socials { position: relative; z-index: 1; }

   #magicbox { position: relative; width: auto; min-height: 275px; margin-top: 10px; display: flex; justify-content: center; align-items: center; }

   .magic { position: absolute; bottom: 0; width: 30%; }