I am placing a header over an image on one of my pages. I put it in absolute position so that it is over the image. Why does my preview mode show a different position than in edit mode (designer) for my header over the image?
Edit Mode:
Preview Mode:
Why doesn’t my header stay where I placed it?
Here is my public share link: https://preview.webflow.com/preview/kellys-trendy-site?preview=12e216454b53a027b276268fbabe500b
The problem is your hero container is the width of the entire screen, and the heading is measuring from the edge of that.
Give your hero container a max width matching your nav bar and center it, and you’ll be able to style from there.
Ok, that worked. But now my image is not centered. How do I center the hero container and the image so that the image is lined up with the navbar? Should the hero container be on auto or relative position? Or absolute?
Hero container should be relative and centered (the icon directly above the arrows you use to adjust height). You’ll also need to remove the positioning styles you’ve put in there. You’ve got 172px set for left coordinates. Just click on the blue symbols and “Remove this style”.
Oh wow! Lol, I didn’t even notice the center element button there! Webflow creators should make that stand out more 
Thanks!
Also, the reason your home page is scrolling horizontally is because you have a width of 1900+ pixels set on your nav bar. Just delete that value and you’ll be good.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
