One fix can be done to put equal grid size for #site-heading and

Maybe we can remove the UL LI tags and replace it with DIV A style="display:block" and set up the width to center the text. (example 3 columns width 33,3%, 4 columns width 25%).

Another solution will be to use css selector for counting child elemens and set percentage width like they do here: https://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has

in both cases we can make something that will auto adapt to fit the container space

This website is not mobile friendly. I suggest to re-design it in a responsive way maybe using bootstrap like the fedoraproject.org webpages.