Two text blocks on one line causing spacing and mobile issues

I have three pages that show examples of work. At the top of each page, there is either one or two text blocks with text navigation links, below that a spacer block, and below that another text block. On the two pages with one text navigation link, the spacer is larger than on the page with two text navigation links:

I am using some CSS code on this page to reduce the height of the spacers, but even without that code the same issue occurs - both spaces are just larger but are still different sizes.

When I'm editing the pages, all the similar blocks on each page appear to match in height. It's only once I'm viewing as a webpage that the differences show up.

Also, on mobile, the text navigation is being split into two lines:

Looking for a way to address these two issues, or learn a better way to create the navigation links. Thanks.

https://musicorange.com/commercials

https://musicorange.com/corporate-film

By default, Text Block has top/bottom padding, here, Commercial page has bottom padding.

On Corporate Film Page, the padding disappear

There are some solutions to fix this

(1) Add padding to Corporate Film Page

(2) Remove padding bottom on Commercial Page

(3) Use Code Block to create this Navigation, I usually use this, I think it will will be faster more than use Text Block. But It will take some time to code it.

You can consider and let me know. I will give you code.

Ok, that makes sense. Yes, I'd like to do it the way you think is best (with code). Please send that along. Will that code also help with the two nav links stacking on mobile?