title: CSS Centered Image effecting screen width, mobile view
body: <p>I’m having some issues with styling my header image while using bootstrap and I’m not sure where else to take this.  The image has always been centered however there is been a left-right scroll at the bottom of the page.  It was annoying, but it was not an issue as it worked fine on mobile devices.  Now, with some recent updates the website does not appear correctly on my phone (cache clears I guess) which is a problem.  I’ve identified what’s causing the issue but I do not know enough about CSS to correct it with bootstrap and mobile devices.  The website is SamsSocial.com to see the live example of it which may make it easier to debug.  Any help that can be given would be much appreciated.  Thank you</p>
  
  <pre><code>&lt;style&gt;
  .header_img {
      position: relative;
      left: 50%;
      margin-left: -950px;
  }  
  &lt;/style&gt;
  &lt;script&gt;
      function preload(arrayOfImages) {    $(arrayOfImages).each(function(){        $('&lt;img/&gt;')[0].src = this;     });}
      preload([
          "{{ asset('images/header_thin/header2-center_thin_01.png') }}",
          "{{ asset('images/header_thin/header2-center_thin_02.png') }}",
          "{{ asset('images/header_thin/header2-center_thin_03.png') }}",
          "{{ asset('images/header_thin/header2-center_thin_04.png') }}",
      ]);
  &lt;/script&gt;
  
  &lt;body&gt;
  &lt;div class="header_img hidden-print"&gt;
      &lt;table width="1900" height="98" border="0" cellpadding="0" cellspacing="0"&gt;
          &lt;tr&gt;
              &lt;td rowspan="2"&gt;&lt;img src="{{ asset('images/header_thin/header2-center_thin_01.png') }}" width="840" height="98" alt=""&gt;&lt;/td&gt;
              &lt;td&gt;&lt;a href="{{ url('/') }}"&gt;&lt;img src="{{ asset('images/header_thin/header2-center_thin_02.png') }}" width="238" height="59" alt=""&gt;&lt;/a&gt;&lt;/td&gt;
              &lt;td rowspan="2"&gt;&lt;img src="{{ asset('images/header_thin/header2-center_thin_03.png') }}" width="822" height="98" alt=""&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;&lt;img src="{{ asset('images/header_thin/header2-center_thin_04.png') }}" width="238" height="39" alt=""&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT</p>
  
  <p>Two edits have been useful in making the issue better, but my problem is not fully resolved. Everything is fine on the desktop viewed in all sizes, but when I pull up on my phone, it allows the zoomout i believe on the margin-left to the -950 (which i think is why it's to the right). If anyone knows how to fix this, it would be much appreciated. I'm also not sure how to do combine the pictures easily in any way other than a table</p>
  
  <pre><code>body {
      overflow-x:hidden;
  }
  .header_img {
      position: relative;
      left: 50%;
      margin-left: -950px;
      width:1900px;
      max-width: 100%;
  }  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/EBayI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EBayI.png" alt="enter image description here"></a></p>