Making the images fit in the same row regardless of window size

Question

.pinkDiv {
  position: relative;
  width: 100%;
  height:290px;
  background-color: pink;
}

.miniDiv{
  width: calc(100%*100/893);
  background-color: green;
  float:left;
}

.maxiDiv {
    width: calc(100%*93/893);
    background-color: green;
    float:left;
}



img{
  width: 100%;
  height: auto;
  margin-top: 174px;
  float:left;

}

#queen {
  margin-top: 75px;
}

<div class="pinkDiv">
      <div class ="miniDiv">
        <img src="./Images/pawn.png" style=" width:100%;">
      </div>
      <div class ="miniDiv">
        <img src="./Images/pawn.png" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="./Images/pawn.png" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="./Images/pawn.png" style="width:100%">
      </div>
      <div class ="maxiDiv">
        <img src="./Images/kwin.png" style="width:100%" id = "queen">
      </div>
      <div class ="miniDiv">
        <img src="./Images/pawn2.png" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="./Images/pawn2.png" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="./Images/pawn2.png" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="./Images/pawn2.png" style="width:100%">
      </div>
</div>

I have about 7 divs placed in a row, each an image with background-color green. On my laptop, the row is aligned on the left. When I narrow the window size, the images fit in one row. As the window size gets even narrower, some images pile down on the bottom of the first stack. How do I get all the images to stay in a row regardless of window size? I've attached three screenshots, each explaining the aforementioned scenarios respectively.

EDIT: The horizontal problem has been resolved with guidance in the comments section. This created another problem of vertical distortion of images on resizing the window.

Answer 1

Something like this? The key element you're missing is width: calc(100%/7); Just put that where you want it to be exactly a 7th of the window or container.

div.blue {
  height: 30px;
  width: calc(100%/7);
  background-color: blue;
  float: left;
}
div.green {
  height: 30px;
  width: calc(100%/7);
  background-color: green;
  float: left;
}

<div class = "green"></div>
<div class = "blue"></div>
<div class = "green"></div>
<div class = "blue"></div>
<div class = "green"></div>
<div class = "blue"></div>
<div class = "green"></div>