title: How do I keep a CSS container the same size?
body: <p>I have 6 images next to each other in two rows. I used a CSS container to center it (couldn't use padding). However, when I shrink the screen, since the margin is set to auto, the container shrinks opposed to the blank space around the container. You can see this <a href="https://www.netatlantic.com/featuredindustries/" rel="nofollow noreferrer">here</a> . The blue is just there to show the container. The images need to stay in that order until it becomes physically impossible for them to stay there. Any help would be appreciated! Thank you in advanced!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Featured Industries&lt;/title&gt;
  &lt;/head&gt;
  &lt;style&gt;
  .center {
      margin: auto;
      width: 66%;
      height: 625px;
      border: 3px solid #0026E3;
      padding: 0px;
  }
  .img {
      float: left;
  }
  a:hover img {
      position: relative;
      z-index: 1;
      transition: -webkit-box-shadow 0.3s ease-in-out;
      -webkit-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
      box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
  }
  &lt;/style&gt;
  </code></pre>