Your navbar width is relative to the window width (15/17vw).
In the designer, the window width is narrower than in live view so the navbar would display in different width. (remember that vw also includes the scrollbar wich is about 15-17px not just the viewable window width like in %)
You can apply the navbar with a non-width dependent units (px/rem/vh…)
or add a max-width (for example: 300px) to control the width expansion.
Thank u for your quick reply! Nevertheless I think there is a problem with the height of my navbar, doesn’t it? Because my logo and social media links are not fully displayed on the live website.
I can’t view the live site so I can’t actually see the problem.
but if you mean it’s cut off like in the pic you attached above,
then try changing the margins spacing the logo, menu, icons
to VH units instead of the fixed px units. that way the spacing will be reduced according to the window size. (can do the same with the Navlinks as well if needed)
Also, I would change the navbar flex element to justify top/start and not center.
if the user resizes the window to make it shorter,
or just uses a very short window, I want the navbar to show top to bottom.
that means that the bottom of the navbar could be scrolled to, but the logo is always in view. just give it a little spacing from the top.
You can also try an approach of giving “Div Block 62” 100% height and use Flex Justify space-around to space them. that way the flex container will distribute the logo, menu, icons spacing from top to bottom.
I first of all want to apologize for the delayed answer. Anyway I managed to fix the problem by setting the height of “divblock 62” at 100% and used Flexbox to center and space them.