ウィンドウ幅を広げると画像の配置が崩れる

Question

画像を横に3つ並べて表示しているのですが、ウィンドウ幅が1160pxを超えると3つ目の画像が下に落ちてしまいます。

1160px未満
https://gyazo.com/ae9ba5579888b2be1373c9f177d1f6e0

1160px以上
https://gyazo.com/d8ba71ff4cd7edfb6986dcb23fd4e25c

どのようにすれば改善できるでしょうか。
下記ｃｓｓのコードです。

.img-menu li {
  float: left;
  list-style: none;
  width: 33%;
  text-align: center;
  height: 200px;
  font-size: 50px;
  transition: all 0.6s ease 0s;
  /*background: center center;*/

}

.img-menu li:hover {
  cursor: pointer;
  transform: scale(1.1, 1.1);
}

.img-menu li a {
  text-align: center;
  line-height: 0.95em;
  font-weight: bold;
  color: #FFF;
  text-shadow: 0 0 0.10em #2962FF,
  0 0 0.15em #2962FF,
  0 0 0.80em #2962FF,
  0 0 1.00em #2962FF;
}

#wrapper {
  background-image: url("images/top.png");
  background-size: cover;
  text-align:center;
}

.kumo1 {
  background-image: url("images/kumo1.png");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 100px;
  background-position: center;
}

.kumo2 {
  background-image: url("images/kumo2.png");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 100px;
  /*margin-top: 200px;*/
  background-position: center;
}

.kumo3 {
  background-image: url("images/kumo3.png");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 100px;
  background-position: center;
}

Comments

[dit.]

CSSだけでなくHTMLも提示してください。

[kei344]

（質問文は編集できます）teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）

Answer 1

それは要するに3つの画像とその余白の合計が1160pxを上回ってしまったということですよね。そいうときは、例えば画像の横幅を25vwずつ、marginを左右3vwずつにして右の画像をfloat: right,左の画像をfloat: left,中央の画像をtext-align: centerに指定してやればいいんじゃないでしょうか。
ちなみに、vwという単位は調べてくださいね。