调整网站大小时，图像不会在一起

Question

I make a website with 3 images side by side. I actually wanted to get those 3 games centered in the middle of the website, but I don't quite get on how to get it done, so I'm okay for now.

But now when I RESIZE the website the images they change positions.

I tried to fix this without success.

Does anyone know how to fix this?

 html { width: 100%; } body { background: url(achtergrondimage.png); width: 100%; } .home2 { margin: 0 auto; width: 49.7%; text-align: center; background-color: yellow; height: 400px; float: left; } .center { margin-bottom: 0px; margin-top: 200px; margin-left: 225px; width: 40%; padding: 20px; height: 300px; float: left; align-content: center; vertical-align: top; } .homefarcry img { margin: 10px; padding: 0px; float: left; width: 30%; display: inline-block; border: solid 1px; align-content: center; vertical-align: top; border-style: solid; } .homefifa18 img { margin: 10px; padding: 0px; width: 30%; float: left; display: inline-block; border: solid 1px; align-content: center; vertical-align: top; border-style: solid; } .homeoverwatch img { margin: 10px; padding: 0px; width: 30%; float: left; display: inline-block; border: solid 1px; align-content: center; vertical-align: top; border-style: solid; } 

 <div class="center"> <div class="homefarcry"> <div class="farcry5"> <img src="https://images-na.ssl-images-amazon.com/images/I/91j3CuFDMiL._SL1500_.jpg" alt="farcry 5" style="float: left;width: 30%; margin-right: 1%;margin-bottom: 1em" /> </div> </div> <div class="homefifa18"> <div class="fifa18"> <img src="https://resources.budgetgaming.nl/boxarts/118979_fifa18ps4kopen.jpg" alt="fifa18" style="float: left; width: 30%; margin-right: 1%;margin-bottom: 1em" /> </div> </div> <div class="overwatch"> <div class="homeoverwatch"> <div> <img src="http://i.ebayimg.com/00/s/MTUwMFgxMTk2/z/5p8AAOSw65FXuyoV/$_57.JPG?set_id=8800005007" alt="OverWatch" style="float: left; width: 30%;margin-right: 1%;margin-bottom: 1em"> </div> </div> </div> </div> 

Answer 1

html {
  height: 100%;
  width: 100%;
}

body {
  background: url(achtergrondimage.png);
  width: 100%;
}

.img-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.img-container img {
  width: 70px;
  height: 90px;
  margin: 5px;
}

This should align them to the center while making sure they never break on the next line.

I used flexbox and justify-content: center on .img-container to align them to the center and flex-wrap: nowrap so they don't break