Header doesn't adjust width elegantly

Question:
In a site I am designing, the header width doesn’t adjust elegantly. There are three items in the header: a text box at left containing the site name and slogan; a Contact button at upper right; and a menu at lower right. Only the Contact button moves left or right aligned with the border of the page contents when the browser is narrowed or widened. Can I get similar behavior out of the other two header elements?

Product:
Wix Editor

What are you trying to achieve:
When the width of the window is changed, the Contact button adjusts well, its right edge staying aligned with the right edge of the page content. But the menu doesn’t move as well, and the site title adjusts quite poorly, going off the left edge of the page when the window is narrow, indented too far to the right when the window is wide.

Is there a way for me to set up the header so that it adjusts better to different browser window widths? In other words, so the text box and menu behave about the way the Get in Touch button behaves? Images are attached.

What have you already tried:
Tried searching for an answer online. Tried various settings for layout of the items that don’t move correctly. Was unable to access “docking” settings because nothing I do produces the icon for accessing the Inspector panel. (I’m in Google Chrome on MacOS.)

Additional information:
Screen shots attached.

I’ve always been a fan of using a strip in the header - split into 2 columns, the left column left aligned, and the right column right aligned.

Split at 30% / 70% (or whatever works best for you).

In the left column, add the logo/site name etc.

In the right column, add the menu and CTA :slight_smile:

Hope this makes sense :raising_hands: