My theory is that it's something having to do with device-specific rendering, which I'm not sure if there's anything I can do about it. What I do know is that it's only when the navbar is unanchored. When it's anchored, the margins are fine. (I did have to do weird stuff with the margins and position on desktop so there wasn't awkward whitespace, hence why it's at -1 em from the top and -1.5em from the left.)

Hi there! I think I can help. I looked through your code a bit, specifically: https://allidraggy.neocities.org/testpage1 and https://allidraggy.neocities.org/navbar_styles.css I noticed in your navbar.css you have "@media screen and (max-width: 700px)" which is great! Generally this is the easiest way to guarantee your site will look good on all sizes.

All you need to do is add "@media screen and (max-width: ???px)" at cascadingly smaller sizes. So, for example, after your endging bracket for 700px wide screens, add another rule beneath it for 600px wide screens. You can continue doing this at smaller and smaller sizes, adjusting the exact CSS as you go.

You can always inspect your problem page (or specific element) with a left click. Play around in the developer tools to see what's really going on in your website. This is what has worked for me! :)

Thing is, it isn't width. The issue is specifically on my phone, not on any window with those pixel dimensions. If it were media query, then there'd be the same gross margin issue on a desktop window that's the same size, and there isn't.

https://draggianuniverse.neocities.org/goodgirlsbadguys/chapter01

A bit too far right on my end

slightly more space on the left for me too

using box-sizing: border-box; OR setting left and right margin to auto, will work. i like the second option though bc thats the best way for horizontal centering!

OK, thanks. changed from 5% on left and right to auto for both in the stylesheet and it looks like it worked

I'm not sure I fully understand the problem, but you can use units higher than 100, like 150% and 200%

What I currently have on there is "100vw" which SHOULD be 100% of the width of the screen with no relation to the parent element.

You have a lot of prefixed elements in your CSS (the moz-transform and webkit-transform) set to percentages still, which may be somehow taking precedence; try changing all of those and the default transform to vw at once

In your homepage_styles.css file specifically

Ok wait it looks like you have an animation "scroll" in your index's CSS which is using vw, but it never gets applied to your marquee because the only selector it applies to is ".enabled-animation .marquee_content", and that space means it's looking for the child "marquee_content" of "enabled_animation", but there's no enabled_animation anywhere, so it's falling back to the "marquee" animation in your homepage_styles

...and now despite the scroll animation being set, it isn't animating at all.

(got rid of the old marquee code and applied scroll to .marquee__content with no qualifiers)

try applying it to .marquee instead of .marquee-content (it's not moving now because .marquee-content is a span element, or inline, and they hate wriggling. you could also set .marquee-content to "display:block")

or, like, someone can contact me in response to a reference in a blog post or one of my flight rising dragons or something, which is also a more accurate metric for what I actually think about regularly than a list, and avoids having to update said list and decide what goes on it.