Layering groups to help align groups on a page, solution to my problem

Doing the most basic alignments in Bubble has brought me to my knees yet again.

If you look at the screenshots, I have two elements, the 3 player icons group, and the 3 dot icon, (not sure what it’s called) all in one group, (lighter colored blue). Ignore the house, bag, infinite icons below.

In responsive, setting the Player icon, due to it’s right margin being set against the left margin of the 3 dot icon, won’t line up in the middle. What do I need to do to make this work. Is there a way to make the right margin for the player control group be off the parent group and not the 3 dot icon?
Thank you very much. This is the hardest part of bubble for me and the part I always dread it when I have to make things line up as I rarely get it right. Cheers. !
The pics didn’t upload the way I thought, but hopefully they make sense.

Editor View
Player1|480x237 Player1
In Responsive, stretched out some. This is how it looks in the browser. Too far to the right.
Parent Group
Player_parent group
3 dot group with margin set to right

3 Player Group w Margin set to middle
3 Player Group w Margin Explain box open.
Explain margins

I’ve dealt with this before. Groups elements etc are competing for the same space. Layering would help here.

  1. Remove the 3 dot icon from Group AZ. ( note its location on the page )
  2. Ensure that Group AZ is the full width of the page and centered.
  3. Now make Group AZ not visible on page load.
  4. With location noted, Place the 3 dot icon where it’s supposed to be on the page.
  5. Make Group AZ visible again.

Now both items can move independently of each other. 3dot group right justified and 3player group center justified.

I did a quick test and it worked. You may have other things going on so it may take some tweaking?

Let me know if this works.

Doing it this way

Yep, that seemed to do it. I just tidied up the conversation as I got it figured out from what you said. Thanks so much for the help.