Layout not honest/accurate during design

Design help Layout & Design
1

I am noticing the layout/view of my pages is not honest during designing. After thinking a page is done I check it out in the preview and multiple things are noticeably off.

Has anyone experienced this ?
Is there a fix for this ?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I guess in the preview the most obvious example is the spacing on the right, there seems to be margin that is not present when in edit mode.

3

image
image2770×994 216 KB

You’re setting a lot of different width values within your project and it’s affecting their size in the previewer. For example, one of your paragraph elements has a width of 50vw, which stands for ‘view width’. So when you go to preview, that paragraph element is being sized to 50% of the viewport width, which is why its spills into the element next to it.

I don’t want to speak on your experience level, but I’d definitely recommend learning a little more about page structure and responsive web-design. The current way that you’re building out your site is going to result in a lot of styling issues down the line.

Learn about layout principles, such as ‘flex-box’, grid, etc… and general page structure. For the page content in the example you’ve shared, I’d create a container for all the page content, use a layout method to get the elements arranged the way you like, then set that container’s max-width which the child elements will inherit.

There are global naming systems that exist to simplify your layout and provide a universal page structure. One of the latest and most popular examples is Client first from Finsweet. You can check it out here. It can be daunting to understand at first, but there is a ton of documentation that exists and the team at Finsweet and the community are extremely active and helpful. Client-First Style System for Webflow by Finsweet