a) The original design is: content roughly 3/4 of the total width, floating right, header and sidebar roughly 1/4 of the total width, floating left. You decreased the header width and added a right margin to content, to move the content to the left, so there's no longer room enough for the sidebar to show below the header. So, yes, if you want to make the header narrower you also need to make the sidebar narrower.

b) Instead of adding a right margin to content, I think you'd better increase its width.

c) Drag the browser window to make it narrower and see what your header will look like in a mobile device. Whatever changes to the layout you make, you must make sure they don't apply when the theme becomes so narrow that its sections get reshaped and rearranged.

Can you make these changes yourself or do you want me to give you the coding?

You're welcome!
There's a narrow band of screen widths where the layout goes wrong. Try turning the 865 to 906 please. (Sorry, your theme is premium so I couldn't use it in my test blog to test things first.)