flex-wrap: wrapの挙動がiphone実機で確認するとおかしい

Question

[カフェのホームページ](http://blue-amami-4688.main.jp/Reつなぐ test/)
カフェのホームページrvs
上記リンクのカフェのHPの料理のメニュー画像をPCではdisplay: flex;を使い、縦2x横4の配列にしているが、スマホ表示ではflex-wrap: wrap;を指定し、4x2の配列にしたいのですが、iphoneで確認すると下の画像のようになってしまいます。(画像１枚分空白が出来ている）

Web制作独学でまだ間もないので実機検証も初めてなのですが、自宅にあるhuawaiのスマホ、iPhone6s,　iPhoneXSで確認しました。huawaiでは問題なく、iPhoneでのみ上記画像のようになっております。

Safariが原因かとも思いましたが、iPhoneでchromeを使って見ても同じでした。
MacとiPhoneを繋げば、iPhoneの検証をMacで出来るそうですが、生憎、自宅のPCはwindowsなのでどのような問題が起こっているのか解決できません。

どなたかこのような現象が起こっている理由を教えて頂けるととても助かります。

Comments

[Lhankor_Mhy]

ご提示のリンクは404で閲覧できないようでした。

[thayamizu]

大変失礼致しました。お願いしておきながら申し訳ございません。
リンク先URLを編集させて頂きました。ご確認いただけますと幸いです。

Answer 1

.wrapper-menu .cardの横幅を45%くらいにした場合横に並びますか？
その場合余計な要素が横幅をもっている可能性があります。

.row:before, .row:after 部分をコメントアウトするかwidth:0を追加してみてください。

Comments

[thayamizu]

返信遅れまして申し訳ありません。
cardの横幅を狭くすると横並びになりますが、アドバイス頂いた部分をコメントアウトやwidth:0にしても変わらず、レイアウトがずれておりました。
chromeの検証では横幅を狭くしてもレイアウトは崩れないのに不思議です・・・。
今回は.cardの横幅を少し狭くして対応することにしようと思います。
ありがとうございました！