title: More than one image causing margin shift of whole page
body: <p>I have tried everything I know, and I still can't get it to work. I want the four images to be like in the screen shot, but a lot bigger (600px centered). When I do this, however, it causes the <strong>entire</strong> container to be shifted to the left for some reason unknown to me.</p>
  
  <p>HTML snippet:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="container"&gt;
      &lt;div class="header"&gt;
      ..
      &lt;/div&gt;
      &lt;div class="menu"&gt;
      ...
      &lt;/div&gt;
      &lt;div class="content"&gt;
      &lt;div class="photos"&gt;
      &lt;h2&gt; Here are some photos.....&lt;/h2&gt;
      &lt;img src="img1"&gt;
      &lt;img src="img2"&gt;
      ...
  &lt;/div&gt;
  &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS snippet:</p>
  
  <pre><code>body{
      margin: 0;
      padding: 0;
  }
  
  .container{
      background-color: #AAC1CC;
      max-width: 1440px;
      width: 100%;
      height: auto;
      margin: 0 auto;
      padding-bottom: 10px;
  }
  
  .content{
      margin-left: 20px;
      margin-bottom: 100px;
  }
  
  .photos {
      background-color: pink; /* for testing */
      width: 500px; /*for testing  - normally 100% */
      padding: 0;
      margin: 0;
  }
  
  .photos img{
      width: 100px;
      display: block;
      border: 2px solid black;
      margin: auto;
      margin-top: 40px;
      margin-bottom: 40px;
      box-shadow: 0 0 30px 3px #333;
  }
  </code></pre>
  
  <p>Screenshot: </p>
  
  <p><img src="https://i.stack.imgur.com/RRQcu.jpg" alt="Screenshot"></p>
  
  <p>When the images are small (like 100px) the style is the same across the other tabs. However, if I increase the size of the images > 150px, the entire container shifts to the left by like ~20 pixels. I have tried using <code>&lt;br&gt;</code> between the images instead of <code>display:block</code> but it doesn't make a difference.</p>
  
  <p>Why does this happen?</p>