Replacing twenty thirteen header

I’ve been trying to find a way to replace the header in twenty thirteen for two reasons.

1) The header out of the box seems to be unresponsive. (Parts of the image are chopped off in full screen, even though the image is exactly the specified size – 1600px by 230 px – and the image vanishes completely on a mobile phone).

2) I want a logo instead of a site title.

After a lot of searching, I found this solution (originally posted by Member cclambie – about half way down this thread: https://www.ads-software.com/support/topic/massive-headers?replies=16)

1.
In Appearance>Header
Select “Remove Header”

2.
In Appearance>Editor
Select template Header (header.php)

3.
Add something like this:
<div class=”site-add-header”><img class=”header-img” src=”wp-content/uploads/2013/10/Logo_header1.png” alt=”main-header-logo”></div>
Click “Update File”

4.
Now select to Edit Stylesheet (style.css)
Do a CTRL-F (Find) “site-header”

5.
Remove

.site-header {
background-image: …..;
}

Add

.site-add-header {
text-align:center;
}
.header-img {
width:80%;
}

You now have a scalable image based site-header for the theme Twenty Thirteen.

In the last point I have not chosen to edit the Stylesheet for the main theme (it’s how I read the instruction), instead I have simply added this code to my child theme stylsheet:

.site-add-header {
text-align:center;
}
.header-img {
width:100%;
}

This works really well, but only on the front page. On all the other pages it seems the header won’t load and instead I see the Alt title: main-header-logo.

Does anyone have any suggestions how I might overcome this problem?

This is my sandbox

https://www.nixon-wit.com/

Many thanks.

PS: The block quote is slightly edited to have the same Alt text that appears on my own website.