Header won't smoothly resize from desktop to mobile

Site URL: http://susannelayton.com

I can't figure out how to get my header to display properly on desktop and then smoothly resize to mobile. Everything below the header changes in scale as the size of the desktop window changes, but the header stays wide for most of the transition-- half of it extends beyond the screen, until it finally "clicks" into the smaller size with the "+" for the navigation menu.  What can I do to enable the header / contents below ratio to remain steady?

Thank you for your  help!