When developing a website, I usually design the menu with a menu and CTA button on the sides and the logo in the center. I typically develop this by using divs for the side elements, setting fixed widths for them, and using flex with space-between so that the logo stays in the center of the viewport. Today, I learned a better way of using relative positioning for the menu container and absolute positioning for the logo, which can reduce the number of divs used and make the header menu more responsive instead of having to manually adjust the width for each div in different viewports.

Another option you could use is grid. You can refer to this post on Medium for ideas the next time you want to center an element:

https://medium.com/front-end-weekly/absolute-centering-in-css-ea3a9d0ad72e