display: flex;の指定が違う？

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Airbnbの模写です</title>
6    <link rel="stylesheet" href="lesson2 css.html">
7    <link rel="stylesheet" href="https://fontawesome.com/updates">
8    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
9  </head>
10
11  
12  <body>
13    <header>
14     <div class="containe-header">
15       
16     
17       <div class="video-wrap">
18         <img src="https://a0.muscache.com/airbnb/static/packages/top_rated_homes.594e0eb1.jpg" alt="">
19
20        <div class="athome">
21          <div class="at-mini-wr">
22            <div class="at-mini">
23              <h1>世界の果てまで、アットホーム</h1>
24              <a href="#">Airbnbビジネスプログラムの動画を見る  ▶︎</a>
25            </div>
26          </div>      
27            <h5>まずは仕事用メールアドレスの入力から</h5>
28          <div class="he-meado">
29             <input type="text" name="">
30           <div class="he-button"> 
31             <input type="submit" value="メールアドレスを追加"> 
32           </div>
33         </div>
34            <p>出張管理をご担当ですか？</p>
35            <a href="##">もっと詳しく　></a>
36        </div>
37       
38       </div>
39    </div>
40   </header>
41
42
43
44
45    <hr>
46
47<!----------main start----------->
48    <main>
49      
50
51      <h2>最高の仕事に必要なものすべてを完備</h2>
52
53      <div class="bests">
54
55       <div class="best">
56         <img src="https://a0.muscache.com/airbnb/static/packages/top_rated_homes.594e0eb1.jpg" alt="">
57         <p>高評価の宿泊先＆デザイナーズホテル</p>
58       </div>
59
60       <div class="best">
61         <img src="https://a0.muscache.com/airbnb/static/packages/team_building_experiences.3f19ab77.jpg" alt="">
62         <p>チームビルディング体験</p>
63       </div>
64
65       <div class="best">
66         <img src="https://a0.muscache.com/airbnb/static/packages/collaborate.57a5ee7e.jpg" alt="">
67         <p>コラボを育むスペース</p>
68       </div>
69
70    </div>
71
72
73       <hr>
74 </main>
75</body>
76</html>
77 ```css
78@media screen and (min-width: 768px){
79/*大きい方*/
80	body{
81		width: 1250px;
82	}
83
84	.he-meado{
85		position: relative;
86		 
87	}
88	header input{
89		height: 50px;
90		width: 400px;
91	}
92
93	header a{
94	    color: white; 
95	    text-decoration: none;
96
97	}
98
99	
100
101	header a:hover{
102		 text-decoration: underline;
103	}
104	
105	.he-button input{
106		position: absolute;
107		display: inline-block;
108		top: 10px;
109		left: 240px;
110		width: 150px;
111		height: 40px;
112		background-color: #2C7CFF;
113		color: white;
114		border-radius: 10px;
115
116	}
117	.video-wrap{
118		position: relative;
119		z-index: 0;
120	}
121	.video-wrap img{
122		width: 100%;
123	} 
124	.athome{
125		position: absolute;
126		top: 200px; 
127		left: 60px;
128		z-index: 100;
129		color: white;
130	}
131	/*.athome h1{
132		display: inline-block;
133		font-size: 90px;
134	}*/
135　　
136	
137    .bests{
138		display: flex;
139	}
140    .best img{
141    	width: 10%;
142    	height: 100px;
143    }
144}
145

最後のbestsとbest imgを入れ替えるとデザインが変わってしまいます

本当申し訳ありません
よろしくお願いします

hatena19

2021/01/24 06:15 編集

表示結果が異なる現象が再現できるHTMLコードを提示してください。

Daregada

2021/01/24 06:11

bestとbestsは別のクラスですか、それとも打ち間違いでしょうか。このCSSを利用したHTMLファイルも質問文(編集可能)に載せてください。 AとBでは、あなたの見たところどのように表現が違うのでしょうか。その確認に利用したブラウザーは何ですか。

Lhankor_Mhy

2021/01/25 01:19

最後の行のハッシュ(#)はなんでしょうか？

Koudq

2021/01/26 09:40

すいません最後の行のハッシュ(#)と回答していただきありがとうございますどこのことをお指しでしょうか

Lhankor_Mhy

2021/01/26 09:55

ああ、ハッシュじゃなくて --- で記述していたのですね。了解しました。マークダウンをきちんと使った方がいいですよ。

Lhankor_Mhy

2021/01/26 10:03

AとBは全く同じコードを逆にしたわけではなく、インデントがずれているようです。その中や周辺に全角スペースが入っている、ということはありませんか？いずれにせよ、マークダウンでコードをご提示ください。ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1 3-7. markdownを利用しましょう https://teratail.com/help/question-tips#questionTips3-7

Lhankor_Mhy

2021/01/28 06:11

質問の編集拝読。ご提示いただいたコードでは問題が再現しませんでした。ご提示いただいていない部分に原因があると思われますので、問題が再現するコードをご提示ください。なお、file:// はローカルにあるファイルのパスですので、それでアクセスできるのは自分のPCの中だけです。 A「住所を教えてください」 B「2階の東南角の部屋」みたいな感じのやり取りです。

Lhankor_Mhy

2021/01/30 15:35

質問の編集拝読。ひとまず、CSSファイルに.htmlという拡張子をつけるのはやめた方がいいです。ご提示いただいたコードでは問題が再現しませんでした。

Koudq

2021/01/31 04:13

Lhankor_Mhyさん何度も丁寧に答えていただきありがとうございました感謝しています今後原因がわかりましたら自己解決として投稿したいと思います Daregadaさんhatena19さんも質問ありがとうございました

行動規範の内容に同意します

回答2件

ベストアンサー

本件ですが、まだ解決はしていない認識でよかったでしょうか？

私の方で確認したところ、状況を再現することができました。
コードを拝見したところ、

CSS
1.bests{
2display: flex;
3}
4```の上に2行改行が含まれていますが、その中に全角スペースと思われるものが含まれておりました。
5それを削除してみたところ、`.bests`と`.best img`を入れ替えてもレイアウトが崩れることはありませんでした。
6
7一度これで確認してみてください。