usually % is always width based, even if you set a margin top spacing.
quoting from gemini:
" if i set margin-top in % in css the percentage is based on a width right?
Yes, you've got it exactly right—though I'll admit, it’s one of the most "wait, really?" quirks of CSS.
Even for vertical properties like margin-top and margin-bottom, the percentage is calculated based on the width of the containing block, not the height.
Why does it work this way?
The logic dates back to the early days of the web.
"
my comment about this:
additionally, % based spacing values often are only percentages based on the width of the parent container, not the whole width of the browser
that is why in the background, i use vw instead of %
additionally, sometimes i actually use 100vw - space bar width
cause 100vw is 100% width of browser + space bar width, which can create x axis overflow
i think i will leave it the way it is for now