Streaming live at 10am (PST)

Stuck on Simple Issue (Margins?)

#1

Hello,

Would really appreciate someone’s help with this…

For some reason, my website is wider than the viewport width. It’s such a newbie issue, but I’m truly having trouble making my website fit the browser. My content doesn’t look centered as a result, and the page “wiggles.” I’m a bit frustrated, so help would be lovely.

Here is my site Read-Only: https://preview.webflow.com/preview/nathaliediane?utm_source=nathaliediane&preview=a4687115b7aee0bdc9d2f6338619ffb9

#2

is this published somewhere? It looks alright to me in the preview.

#3

Hey Sarah!

Thanks for your response!

Yes, this is published. Link: www.nathaliediane.design

#4

ah, yes, I’m honestly not quite sure. Have you tried removing all the 100vw’s you’ve added? I don’t know if that’s it, but it’s not needed to get a fullscreen page

1 Like
#5

Hey Sarah!,

You were right! I owe you big time! Let’s be Webflow friends. :smile:

I’m not sure why width @ 100vw makes the webpage bigger than width @ 100%… But, I guess it doesn’t matter. I will never forget width @ 100% & height @ auto ever again.

#6

haha! Glad to hear. :tada:

#7

Actually! I just made it work on all the pages except for :www.nathaliediane. design/nanoshift

Could you please do me a favor and take a look to see what may be going on? Thanks so much!

#8

hmm, could you try setting the width to ‘auto’? Rather than 100%?

#9

It’s still being really stubborn. :confused: I set the sections, body, nav, footer as auto. Maybe I’m missing something?

#10

There’s still an h2 (the blue banner) that was 100vw. Maybe that’s the one?

1 Like
#11

Ah! You were right! It was the banner! Who knew a banner at 100vw could cause so much trouble! THANK YOU!!! <3 You saved my sanity. Haha

Much love from San Francisco!

1 Like
#12

aww, yay! Glad to hear it worked out! Jealous of the location :slight_smile:

#13

Just wanted to explain the whole 100vw thing since you were wondering why it behaves like that. 100vw ignores window scroll when determining the width. That’s it. Your layout is a little bit larger than visible width because it goes behind the scrollbar. 100% would yield the same result of being full width but it will take scrollbar into consideration.

1 Like
#14

Ah! Thank you so much! Wonderful explanation. :slight_smile: