Why is banner image in a simple HTML site different sizes of different pages?
<p>This simple HTML site of 9 pages has been used as a template over the years for multiple sites.  It was not built for that purpose but that's what I am dealing with.  The entire site needs an overhaul, is not responsive, etc. etc.. If you look closely at the code there are multiple contradictions in width properties for the page and banner image.  There is a long to term plan to build a new one.  In the short term it is presenting me with an irritating quirk that I have been unable to solve.  </p>

<p>The banner image displays as desired on desktop sites and androids.  On an iPhone and iPad the banner displays as desired on 7 of the 9 pages.  On two of the pages the image extends beyond edge of the screen. The same rules are applied to each image on the various pages and the HTML appears to be identical. The photos are all identical sizes and resolutions. </p>

<p>Why would two pages be different?  I know there are errors in the code but wouldn't the same errors apply to each image?  I don't see anything in the code that would affect one page differently from any other.</p>

<p>I have tried all variations of width, max-width, auto, percent size, pixel size, and view screen size.  None have created uniformity.  The image on the first two pages is always different than the following 7 pages. I have also run the code through validators and each page has exactly the same errors on them none of which relate to image size.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html class="no-js"&gt;&lt;!-- InstanceBegin template="/Templates/oneclub_17.dwt"       codeOutsideHTMLIsLocked="false" --&gt;
&lt;script src="https://use.typekit.net/doa5ucf.js"&gt;&lt;/script&gt;
&lt;script&gt;try[{Typekit.load({ async: true });}catch(e){}&lt;/script&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
    &lt;script     src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;!-- InstanceBeginEditable name="doctitle" --&gt;
    &lt;title&gt;BOKF ONE Club 2017-Welcome&lt;/title&gt;
    &lt;!-- InstanceEndEditable --&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;link rel="stylesheet" href="css/main.css"&gt;
    &lt;!-- InstanceBeginEditable name="head" --&gt;
    &lt;!-- InstanceEndEditable --&gt;
    &lt;!-- InstanceParam name="Banner Image" type="URL" value="Images/banner_bokf_hmb17_welcome.jpg" --&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="header"&gt;

        &lt;div id="header-top"&gt;
            &lt;div class="container"&gt;
                &lt;div class="header-content"&gt;
                    &lt;div id="nav"&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="index.html"&gt;WELCOME&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="destination.html"&gt;DESTINATION&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="hotel.html"&gt;HOTEL&lt;/a&gt;&lt;/li&gt;
                             &lt;li&gt;&lt;a href="agenda.html"&gt;AGENDA&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="activities.html"&gt;ACTIVITIES&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="climate.html"&gt;CLIMATE&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="questions.html"&gt;Q&amp;amp;A&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="register.html"&gt;REGISTER&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="banner-container"&gt;
        &lt;img src="Images/banner_bokf_hmb17_welcome.jpg" width="1460"&gt;       &lt;/div&gt;

    &lt;div class="container"&gt;
      &lt;div id="photo-caption"&gt;&lt;!-- InstanceBeginEditable name="Caption" --&gt;Ritz-Carlton Half Moon Bay&lt;!-- InstanceEndEditable --&gt;&lt;/div&gt;
      &lt;div id="main-container"&gt;
        &lt;div id="content"&gt;&lt;!-- InstanceBeginEditable name="Body" --&gt;
          &lt;h1&gt;Welcome&lt;/h1&gt;
            &lt;p&gt;Only 30 minutes south of San Francisco is a dramatic stretch of California coastline. Here, craggy and windswept bluffs tumble onto shores pounded by endless surf to postcard-worthy perfection. This is Half Moon Bay where we will celebrate our elite’s 2016 achievements as ONE Club, March 30–April 2, 2017.&lt;/p&gt;
        &lt;!-- InstanceEndEditable --&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;div id="footer"&gt;
        &lt;p&gt;Copyright &amp;copy; Wyndham Jade, LLC. All rights reserved.&lt;/p&gt;
    &lt;/div&gt;

    &lt;/div&gt;
&lt;script defer src="js/main.js"&gt;&lt;/script&gt;
&lt;/body&gt;  
</code></pre>

<p></p>

<pre><code>.container{
width: 1280px;
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0px;
padding-right: 25px;
padding-bottom: 0;
padding-left: 25px;
}
#header{
background-color: white;
height: auto;
}
#header-top{
position: fixed;
top: 0;
width: 100%;
background-color: #FFFFFF;
height: 50px;
line-height: 50px;
z-index: 2;
}
    #header-top .container{
        padding: 0;
    }
    .header-content{
        text-transform:uppercase;
        color: #ffffff;
        font-size:12px;
    }


#nav {
position: relative;
height: 50px;
background-image: url(../Images/oneclub_weblogo_2017.jpg);
background-repeat: no-repeat;
background-position: left center;
padding-top: 0px;
}
#nav ul {
position: absolute;
right: 0;
margin:0;
padding:0;
list-style:none;
line-height: 12px;
margin-top: 27px;
}
#nav li {
margin:0;
padding:0;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}


#home-banner {
text-align: center;
}

.banner-container{
height: 480px;
margin-top: 50px;
position: relative;
background-color: #FFF;
}
.banner-container img {
display: block;
width: 1460px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 480px;
}
.banner-container img land {
display: block;
width: 1460px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 480px;
}

#main-container {
width: 1280px;
}
</code></pre>