Issue Regarding Text Size and Location Depending On Browser.

Site URL: https://www.quadternityproductions.com/

I have a serious issue regarding the formatting of my website and I feel as if Custom CSS is my solution here. Depending on the monitor size and browser size of a screen, my website can get seriously jacked up. On my computer, the navigation bar is one line as intended, but friends appear differently. Even worse is on my rates page for my services, depending on the browser and screen size , the text gets all messed up bleeding into multiple lines. I have provided images as examples for what I have explained, and would really appreciate some help. This messes up the website for multiple people, and it was viewers of my website who brought it to my attention. Thanks!

Images:

Image 1 is what I want the navigation bar to look like, but image 2 & 3 is what many see.

Image 4 is what my rates page should look like, but image 5 is what many see! 

#1. Add to Design > Custom CSS

/* nav one line */
.header-nav-list {
    white-space: nowrap !important;
}
.header-title-nav-wrapper {
    flex: 0 0 70% !important;
}

#2. Where is rate page?