fix(cxl-ui): cxl-marketing-nav menu bar button alignment on desktop

[anoblet]

https://app.clickup.com/t/86b2hv84w

Desktop:

Mobile:

[github-actions]

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui.js	44.82 KB (+0.02% 🔺)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js	15.04 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js	29.23 KB (0%)
packages/cxl-ui/pkg/dist-web/vendor.js	157.96 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-institute.js, packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js, packages/cxl-ui/pkg/dist-web/manifest.js, packages/cxl-ui/pkg/dist-web/unresolved.js, packages/cxl-ui/pkg/dist-web/vendor.js	291.51 KB (+0.01% 🔺)

[github-actions]

Visit the preview URL for this PR (updated for commit 486116c):

https://aybolit-449f1--pr442-anoblet-fix-menu-bar-zkyl0n2o.web.app

_{(expires Tue, 24 Dec 2024 16:35:03 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: ebc08d8a89b4eb54ebfb0bb50bd15f151f1243f5}

[pawelkmpt]

It doesn't look right on desktop.

[anoblet]

I removed the faded red background for the close icon and changed the nav bar padding from --lumo-space-m to --cxl-wrap-padding. It's hard to get perfect alignment since the logo has whitespace in itself, though it looks better than before. The only issue I see is on desktop. It doesn't look possible to remove the padding or margin for the last menu item(https://stackoverflow.com/a/66664161/3935891) so the help link isn't aligned.

Mobile closed:

Mobile opened:

Desktop: