Help with adding a header / banner to my website

The issue does not come from the image itself, but from your header structure. In the CSS, your header has a fixed height, but the banner image inside the header is taller than that. So, this causes the image to overflow the header and the layout below is no longer positioned correctly.

.header {
    background: #ADB96E;
    height: 110px; /* Removing the fixed height allows the header to adapt to the image size and the page displays normally again */
}

You may also consider simplifying and correcting the IMG tag. Fixed width and height attributes can limit flexibility when the layout changes.
Then, having a meaningful ALT attribute is important. It is also good practice to avoid spaces in file names and to use lowercase names consistently.
This means the image file and folders should be renamed in the directory structure, not only rewritten in the HTML.

<img src="../images/TUG%20-%20WEBPAGE%20GRAPHICS/TUG%20WEBPAGE%20HEADER.jpg" width="960" height="176" alt=""/>

replaced by

<img src="../images/tug_webpage_graphics/tug_webpage_header.jpg" alt="Site header">

This allows the image to adapt naturally to the header instead of forcing fixed dimensions.

Anyway, your problem was mainly related to the fixed header height combined with the layout structure, not to the banner image itself.