title: How to tell image to stay centered - CSS
body: <p>I am building a website and I am using 2000px wide images. I want the images to be visible on wide screens (like mine - im using TV as monitor) but the smaller screens will only see the images size adequate to their size. (rest will be cropped). The problem is that the image must be centered no matter what size the viewport is. I have used <code>text-align:center;</code> to make the text responsive. I did read the similar topics but no matter what I do the image stays static and not centered. Please help.    </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;
  
          &lt;div class="header"&gt;
              &lt;img src="images/design/header.png"&gt;
          &lt;/div&gt;
  
          &lt;div class="nav-bar"&gt;
              &lt;a href="index.html"&gt;Home&lt;/a&gt;
              &lt;a href="about.html"&gt;About&lt;/a&gt;
              &lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;
              &lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;
              &lt;a href="service.html"&gt;Service&lt;/a&gt;
              &lt;a href="contact.html"&gt;Contact&lt;/a&gt; 
          &lt;/div&gt;
  
          &lt;div class="side-bar"&gt;
              &lt;h1&gt;This is my side bar&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div class="content"&gt;
              &lt;h1&gt;This is my content&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div class="footer"&gt;
              &lt;h1&gt;This is my footer&lt;/h1&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper {
  max-width: 2000px;
  margin: -8px;
  overflow: hidden;
  text-align: center;
  }
  </code></pre>