flexで配置した画像を縦並びにすると画像サイズが統一できない

DW上だと思い通りに400pxで画面サイズいっぱいに表示されるのですが、サーバーにアップロードすると画像サイズがバラバラになってしまい困っています。
ご教授お願い致します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="description" content="********************************,">
6<link href="../css/reset.css" rel="stylesheet" type="text/css" madia="screen">
7<link href="../css/style.css" rel="stylesheet" type="text/css" madia="screen">
8<link href="../css/kikai.css" rel="stylesheet" type="text/css" madia="screen">
9<link rel="shortcut icon" href="/favicon.ico">
10<meta name="viewport" content="width=device-width,initial-scale=1.0">
11<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
12<title>******************</title>
13</head>
14<body>
15	<div class="wrapper01">
16	<header>
17		<!-- header-->
18		<div class="headline">
19		<a href=".././"><img src="images/rogo.svg" alt="コーポレートマーク"></a>
20		<p class="syamei">***********</p>
21		</div>
22		<nav class="main-nav">
23		<ul class="nav-list">
24			<li class="top-nav"><a href=".././">****</a></li>
25			<li class="top-nav"><a href="#">****</a>
26				<ul>
27					<li><a href="#">******</a></li>
28					<li><a href="#">******</a></li>
29					<li><a href="#">******</a></li>
30				</ul>
31			</li>
32			<li class="top-nav"><a href="#">******</a></li>
33			<li class="top-nav"><a href="#">******</a></li>
34			<li class="top-nav"><a href="#">******</a></li>
35		</ul>
36	</nav>
37	</header>
38			<main>
39				<ol class="breadcrumb">
40					<li><a href="/">****</a></li>
41					<li><a href="#">*******</a></li>
42				</ol>
43				<h1 class="for">**********<br>********************</h1>
44				<div class="info-container">
45					<div class="car-container">
46					<img class="info1" src="images/car.jpg" alt="車並列駐車">
47				</div>
48				<div class="ryouri-container">
49					<img class="net" src="images/beef-balls-2426890_640.jpg" alt="お皿に盛りつけられた料理">
50				</div>
51				</div>
52					<h2 class="infor">*************<br>****************</h2>
53					<h2 class="moble">***************************************</h2>
54					<h2 class="syousai">**********</h2>
55					<div class="kizau-container">
56						<div class="hananana">
57							<a class="cars" href="car-custom/./"><img class="oki" src="images/car5.jpg" alt="テールライトが光る道路"></a>
58								<h2 class="zyouhou"><a href="car-custom/./">&lt;********&gt;</a></h2>
59									<p class="zidousya">・***********************</p>
60						</div>
61							<div class="hanana">
62							<a href="riteiru/./"><img class="hoken" src="images/riteliru.jpg" alt="網で焼いている肉"></a>
63							<h2 class="cons"><a href="riteiru/./">&lt;******&gt;</a></h2>
64							<p class="kokowa">・*****************</p>
65							</div>
66					</div>
67			<div class="betu-company">
68					<ul>
69						<li><a href="#">**************<br>********************</a></li>
70						<li><a href="#">**************<br>********************</a></li>
71					</ul>
72				</div>
73<div class="sitagazou">
74<img class="footerue" src="images/image1.jpg" alt="地平線に見える街並み">
75<p>～*****************～</p>
76</div>
77	</main>
78	<div class="bottom">
79<!--footer-->
80	<footer>
81		<ul class="footer-nav">
82			<li class="footer-nav1"><a href=".././">HOME</a></li>
83			<li>
84		<ul class="footer-nav1">
85			<li class="niretu"><a href="#">****</a></li>
86			<ll class="niretu"><a href="#">****</a></ll>
87			<li class="niretu"><a href="#">****</a></li>
88			<li class="niretu"><a href="#">****</a></li>
89		</ul>
90	</li>
91	<li>
92		<ul class="footer-nav2">
93			<li class="niretu"><a href="#">*******<a></li>
94		</ul>
95	</li>
96	<li>
97		<ul class="footer-nav2">
98			<li class="niretu"><a href="#">********</a></li>
99		</ul>
100	</li>
101	<li>
102		<ul class="footer-nav2">
103		<li class="niretu"><a href="#">***</a></li>
104	</ul>
105</li>
106</ul>
107<div class="sitalogo">
108<img  src="images/rogo.svg" alt="コーポレートマーク">
109</div>
110<p class="tyosakuken">&copy;2020 ************** All rights reserved</p>
111	</footer>
112	</div>
113</div>
114</body>
115</html>

CSS
1/* ########### 420px以下 ########### */
2
3@media screen and (max-width: 420px){
4main{
5	width:100%;
6	margin-left: 0;
7	padding-left: 0;
8}
9.breadcrumb{
10	display: none;
11}
12.for{
13	padding-right: 0;
14	margin-right:0;
15	font-size: 17px;
16	padding-left:4px;
17}
18.info-container{
19	flex-flow: column;
20	padding-left: 0;
21	padding-right: 0;
22	margin-left: 0;
23	margin-right: 0;
24}
25.info1{
26	width: 400px;
27	height: auto;
28	padding-right: 0;
29	padding-left: 0;
30	margin-left: 0;
31	margin-right: 0;
32}
33.net{
34	width: 400px;
35	height: auto;
36	padding-right: 0;
37	padding-left: 0;
38	margin-left: 0;
39	margin-right: 0;
40}
41.infor{
42	display: none;
43}
44.moble{
45	display: block;
46}
47h2{
48	font-size: 16px;
49	margin-bottom: 10px;
50	margin-top: 18px;
51	padding-left:0;
52	padding-right: 0;
53	margin-left: 0;
54	margin-right: 0;
55}
56.kizau-container{
57	flex-flow: column;
58	margin-bottom: 10px;
59	margin-left: 0;
60	padding-left:0;
61}
62.hananana{
63	margin-bottom: 0;
64	padding-left: 0;
65	margin-left:0;
66	padding-right: 0;
67	margin-right:0;
68}
69.hananana a{
70	display:block;
71	width:100%;
72	height: auto;
73}
74.hananana img{
75	width: 400px;
76	height: auto;
77	padding-left:0;
78	margin-left:0;
79	padding-right: 0;
80	margin-right:0;
81}
82.zyouhou{
83	margin-top: 5px;	
84}
85.hanana{
86	padding-left: 0;
87	margin-left:0;
88	padding-right: 0;
89	margin-right:0;
90}
91.hanana a{
92	display:block;
93	width:100%;
94	height: auto;
95}
96.hanana img{
97	width: 400px;
98	height: auto;
99	padding-left:0;
100	margin-left:0;
101	padding-right: 0;
102	margin-right:0;
103}
104.hananana p{
105	font-size: 16px;
106	padding-bottom: 10px;
107}
108.hanana p{
109	font-size: 16px;
110	padding-bottom: 10px;
111	padding-left: 0;
112	margin-left:0;
113}
114.cons{
115	margin-left:0;
116	padding-left: 0;
117	padding-right: 0;
118	margin-right:0;
119}
120.kokowa{
121	padding-left: 0;
122	margin-left:0;
123	padding-right: 0;
124	margin-right:0;
125}
126.betu-company li{
127	padding-right: 0;
128	margin-right:0;
129	padding-left:0;
130	margin-left:0;
131}
132}