Center nested resizable divs to body page

Question

New to CSS and HTML, I am trying to build a simple site that shows 5 images next to each other, that re-scale when the window is resized. What I have so far works well, but the div that contains the 5 images is not centered to the page body, and I cannot figure out how to do it without breaking other properties (like the resize, or that the images are vertically next to each other).

Any help greatly appreciated!

.imgContainer {
  float: left;
  position: relative;
  margin: 0 auto;
  width: 17%;
}

img {
  max-height: 90%;
  max-width: 90%;
}

body {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

html {
  text-align: center;
}

.new_line {
  clear: both;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 75%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-bottom: 10px;
}

.collapsible:after {
  content: '\02795';  /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796";  /* Unicode character for "minus" sign (-) */
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
  background-color: #ccc;
}


/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  overflow: hidden;
}

<div class="content">
  <h4>Heading</h4>
  <div class="imagetuple">
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG1</center>
      </p>
    </div>
    
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG2</center>
      </p>
    </div>
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG3</center>
      </p>
    </div>
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG4</center>
      </p>
    </div>
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG5</center>
      </p>
    </div>
  </div>
</div>

Answer 1

Change your floats to inline-block. Floats have just one valid purpose in the modern web, and that's to get text to wrap around images or other media containers. Don't use them for structural layout.

The center tag is deprecated.. Don't use it. You don't need centering there anyway.

See my CSS comments for other tips. Always strive to use as little as possible by testing each rule in the browser before you wrap up your project.

.imgContainer {
  display: inline-block;
  /* position: relative; not needed */
  width: 17%;
}

img {
  max-height: 90%;
  max-width: 90%;
}

body {
  /* width: 100%; not needed */
  /* margin-left: auto; not needed */
  /* margin-right: auto; not needed */
}

html {
  /* text-align: center; not needed */
}

.new_line {
  clear: both;
}

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 75%;
  border: none;
  text-align: left;
  outline: none; /* be sure you understand the accessibility implications of this */
  font-size: 15px;
  margin-bottom: 10px;
}

.content {
  padding: 0 18px;
  overflow: hidden;
  text-align: center; /* better here than the entire HTML document */
}

<div class="content">
  <h4>Heading</h4>
  <div class="imagetuple">
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG1</p>
    </div>
    
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG2</p>
    </div>
    
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG3</p>
    </div>
    
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG4</p>
    </div>
    
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG5</p>
    </div>
  </div>
</div>