Fix html header area on website in progress -- updated

We are in the middle of building a new website for a client. We have hit a snag trying to get the header to function as intended. [login to view URL] Here are the website files: [login to view URL] The header (with the blue bar, logo, nav / highlights, company name, live stock ticker is not scaling properly. When the browser narrows below 1920px wide, down to the responsive version, in between the header should scale smoothly, but it jumps around, and the design gets broken (see the space above the white logo disappear completely). We need this header to scale down smoothly, always looking the exact same scale in relation to the other elements. I need it to scale smoothly, like it does on this site I just made: [login to view URL] (the way the text reduces size smoothly on browser resize) This site is just about to go into WordPress theme, so needs to be worked out first. If you want to prove to us you can get it working and show me something, let me know.