Expected behavior

I would like to have a navbar that has 2 sets of UL list items that is centered on screens medium-sized or larger. The fist is visible on all screens (even in collapsed responsive state) and the second is hidden in the collapsed area.

Actual behavior

As of right now it always justifies the entire navigation to the left. I have tried almsot every navigation class that I can find and am still at a loss.

Resources (screenshots, code snippets etc.)

Existing code: https://mdbootstrap.com/snippets/standard/goodfellastech/2996012