Box margins don't work on overlapping elements?

I’m new to bubble, and I’ve searched but haven’t found a solution to my problem. I am trying to build my navigation header with a dark background color. When I put an icon element and a text element in place on the left of the header to represent the app name I can’t get them to align left. I’m building a design on a 8pt grid, and want the elements to remain separated by 8px. When I resize the page they move close together, and closer to the left side of the screen. When I remove the background shape (I used a shape, is that correct?) the margins stay fixed as expected. How do you solve this? It seems like it should be a simple thing, but I can’t figure it out.

Don’t use a shape for that, use a group. You can edit the properties of the group to have colors and such, but the usage of the shape is why you’re having alignment issues.

1 Like

Ah, that’s awesome, I didn’t know that, thank you!

1 Like

Wanted to follow up, I did as suggested and it works perfectly, thanks again!

1 Like