Hey @mcmlxxx8 and welcome!
I’ll start from the basics:
What’s the difference between setting width in % and in PX?
% - Percentages are a relative unit, which is defined by the size of the screen on which your website is being viewed. Example: If you set an element’s width to 50% it’s width and you view it on a screen that has a size of 1,920x1,080 PX it’s width will be rendered at 960 PX (That’s 50% of 1,920). Logically, if you view the website on a screen with a size of 1024x768 PX the element’s width will be rendered at 512px.
PX - Pixels are absolute units, which are not defined by the size of the screen on which your website is being viewed. An element with a width of 600px will render at that width no matter on what screen you are viewing it.
That’s the basic difference between the two. Now that you know that let’s continue.
When designing responsively it’s generally accepted that you should use %, because that way you can be mostly certain your elements will adapt to the screen their being viewed on. In comparison, if you design in PX you risk that your elements might look a bit weird on certain screens.
For example an element with a width of 1,140px won’t render properly on a smartphone screen which width is 1,080px. It will get cropped and won’t scale down to adapt to the screen.
In your particular case the difference in alignment comes from two factors:
- You’ve defined the element in %.
- While in the Design Editor you are viewing it at a lower screen width (because of Webflow’s UI around), whereas when you publish it you basically view it in full size. So you are technically seeing how your design looks on two different screen sizes.
There are a couple of things you can do if you really care about setting an exact size and alignment, without breaking alignment.
The easiest would be to define the width of the element in %, but also set a MAX width in PX. What this will do is that it will limit your element from going above the MAX width you’ve set for it, while still allowing it to adapt percentage wise when you view it on smaller screens.
Example scenario:
You set the element’s width to 70%.
You set its MAX width to 1,280 PX.
You open your website on a screen with a width of 1,366 PX. Your element will be rendered with a width of 956 PX, because that’s 70% of 1,366 PX.
You open your website on a screen with a width of 1,920 PX. Your element will be rendered with a width of 1,280 PX, because 70% of 1,920 PX is 1,344 PX and you have set a MAX width of your element at 1,280 PX.
This is a great little trick to ensure that your element will look the same above certain screen size. However, keep in mind that when designing responsively there’s no way your design looks the same on all screens. That’s why it is responsive. So the further you reduce the screen size, the more your design will change.
I hope that was helpful!
