Full width menu: how to spread out horizontally and change active color.

I’m trying to create a custom full-width menu below the header section. I tested two options to get there, a) a full-width menu module, b) a normal menu module, row settings to width 100% - both working equally, but not how we need them.

I need the links to remain vertically centered when I reduce the height of the menu bar. Found a code that worked (display: flex;
flex-direction: column;
justify-content: center;})


But now the links should be spread evenly across the width of the menu bar, not lumped in the middle. How can I achieve this? Can t find a code that works.

And where is possible to change the background color for the active link ? (like a tabs menu)

 

Thanks so much for the quick reply. I tested your suggestions. the row width didnt have an effect.
The background code works, but not quite how I meant it.
Seethe two screens shots, unfortunately the site is in development modem so I can't share a link

a) what it looks like, the background only changes around the link text and the links aren't spaced out and
b) what we want, links in a white block with more padding

Hope this makes sense..... Any other ideas?

T