How do i fix a navigation bar that is out of alignment?

I used the following code to create a secondary navigation with a centered logo:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
   $(function() {
   $(".header-display-desktop .header-nav-item:nth-child(n+4)") .prependTo (".header-actions--right");
});
</script>

However, the navigation on the left will default to two lines if the screen is smaller - there is a lot of padding in between the logo and on the side of the left screen. Additionally, the give button at the top right is being cut off the screen. I just wanted to figure out how to adjust either the spacing or to make sure everything is centered and aligned correctly. At the very least to fix the button being cut off at the top right.

Anyone know how I might fix this?

Can you share the website URL?

It looks like on smaller screens that the header actions box is not big enough to accommodate the addition of the two navigation items. I would suggest that you should only implement this style change when the screen is  big enough to take this layout.

@Ziggy

Thanks for your reply. The URL is www.thejja.org

That makes sense, but even on bigger screens it looks like there is enough room but the spacing on the left side of the screen or between items is quite wide, so I was hoping there would be a way to adjust that. 

@Ziggy

That's actually exactly what I needed! Thank you so much!