unable to change header-image size

Hi,
I’m having trouble with resizing the header image, I want to change the image with my own, but the size is always wrong even after I tried to modify some parts of the css.
Actually the problem happened because I resized the content part to 960px, the original size is a little bit too small because I moved the widgets to the right side of the content. When I’m using the original size, the header image seems just fine and responsive, but when I resize it to 960px, the header image size still won’t change even when I already modify the css. The header image size is wrong only when I view it in the monitor, but when I view it using smartphone or tablet it is still responsive and the size is right.
There is a part of the css that I can modify so that it can be viewed correctly in the monitor:

.site-header img,
#custom-header-image img,
.entry-content img,
img.size-full {
	max-width: 100%;
/*	width: 1000px; */
/*	margin-left: -105px; */
}

If I modify the line max-width: 100% with those 2 lines after it, it can be viewed correctly in the monitor but it becomes unresponsive in the gadgets, I’ve also tried to modify the @media for the smaller screen but it’s just won’t work.
Can please someone tell me which part of the css should I modify or add so that it can be viewed correctly both in the monitor and smaller resolution screen?
Thank you before and sorry for the bad English ??

Here’s my site:
https://www.the-cake-o.com/