Dividing header or top bar into segments

I utilized the post on Feb 22, 2019, to get started on this issue. I will copy all of the information below so you have what I started with.

And for now, my client is happy with what I ended up with. But we may need to do it where the client requested so I just wanted to follow up and find out how to get it where they wanted it.

I got this to work on my site but I was wondering if you could help me get the logo into the first section of the header or suggest an alternative to what I have now. the section pushed my logo down and I would like to top align them.

One other question, once I added the new header when I go to customize I am not seeing the page preview on the right of the customize screen, any thoughts on what might be causing that?

Thanks,
Jamie

-------
Hi there,
Is there any way to divide the top bar and header into segments with certain length (i.e 3 segments with 50%, 30%,20% of the container) and place different widgets in each of them.

Thanks,
EG

GeneratePress 2.2.2
GP Premium 1.7.8

----
To do this in the header, you’d likely need to replace the header element with your own header element.

To do this, you could:

1. Create a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to header and check the “Disable Site Header” checkbox.
3. In your content area, add this:

Now you just need a little CSS:

.header-section {
display: flex;
}

.header-section > div {
width: 33.33333%;
}

@media (max-width: 768px) {
.header-section > div {
width: 100%;
}
}
Depending on your browser requirements, you might want to run that code through this tool: https://autoprefixer.github.io/

To add widgets in those sections, you could use a plugin like this: https://wordpress.org/plugins/widget-shortcode/

Then be sure to check the “Execute Shortcodes” checkbox as well.