端末ごとのレスポンシブデザインについて

ポートフォリオをレスポンシブデザイン対応にしたいのですが
デベロッパーツールでは問題なく動作しているものの
タブレットやスマートフォンで見ると動作しません。

デベロッパーツールでの検証と同じ様に端末ごとに表示するにはどうしたらいいでしょうか？

試したこと

CSSの書き直し。
アップロードのし直し。

補足情報（FW/ツールのバージョンなど）

サーバーは　Xサーバー
エディターは　VSコード

2/2 9:00追記
m.ts10806様
ご指摘ありがとうございます。
リンクパス外しました。

HTML/CSSのコードを添付いたしました。
お目通しいただけると幸いです。
よろしくお願いいたします。

HTML
1<div id="atracition">
2    <div class="container">
3      <div class="atracition">
4        <h1>ATRACITION</h1>
5        <div class="at at1">
6          <img src="./image-zoo/at1.JPG" alt="象">
7          <div class="text">
8            <h2>迫力満点の象</h2>
9            <p>ゾウは大きいことはわかっていても、いざ目の前にするとその大きさに圧倒されます。でも温厚な性格のゾウたちは、おやつを差し出すと長い鼻で受け取ってくれてとってもかわいい。迫力満点で子供も大人も大興奮です。他ではなかなか体験できないゾウとのふれあいを楽しんでください。</p>
10          </div>
11        </div>
12        <div class="at at2">
13          <img src="./image-zoo/at2.JPG" alt="草食動物">
14          <div class="text">
15            <h2>草食動物との触れ合い</h2>
16            <p>カピバラやカンガルー、フラミンゴなどの展示場に自由に出入りし、触れあうこともできます。水を嫌う習性があるミーアキャットや、暗い場所を怖がるサルの習性を利用した環境づくりをはじめ、自然と動物たちがその環境に留まる仕組みになっています。</p>
17          </div>
18        </div>
19      </div>
20      <div id="atencion">
21        <div class="aten">
22          <img src="./image-zoo/aten.JPG" alt="アテンション">
23          <h3>ここに行きたいな</h3>
24          <p>この動物が見たい！トイレに行きたい！お土産が欲しい！そんな時は随時巡回しております係員にお気軽にお申し付けください。</p>
25        </div>
26        <div class="aten">
27          <img src="./image-zoo/food.JPG" alt="フード">
28          <h3>ワイルドな</h3>
29          <p>アフリカの先住民が食べているお食事が体験できるメニューや当動物園オリジナルのジャークチキンを是非ご堪能ください！</p>
30        </div>
31      </div>
32    </div>
33  </div>

CSS
1#atracition > .container {
2  display: flex;
3  justify-content: flex-start;
4  margin-top: 30px;
5}
6
7.at {
8  width: 100%;
9  display: flex;
10  justify-content: flex-start;
11  margin-bottom: 50px;
12  font-size: 85%;
13}
14
15.text {
16  padding: 0 10px;
17}
18
19.at h2 {
20  margin-top: 0;
21}
22
23.at img{
24  width: 300px;
25  height: auto;
26  object-fit: cover;
27}
28
29#atencion {
30  width: 100%;
31  background-image: url(./image-zoo/bg.JPG);
32  background-size: cover;
33  padding-top: 15px;
34  padding-left: 15px;
35}
36
37#atencion img {
38  width: 60%;
39  height: auto;
40  object-fit: cover;
41}
42
43.aten {
44  margin: 5px;
45}
46
47h3 {
48  margin: 5px 0;
49  font-size: 80%;
50}
51
52#atencion p {
53  font-size: 77%;
54  text-shadow: 1px 1px #fff;
55}

CSS(media="screen
1#atracition > .container {
2  display: flex;
3  flex-direction: column;
4}
5
6#atencion {
7  display: flex;
8  justify-content: space-between;
9}
10
11.aten img{
12  width: 100%;
13}
14
15@media screen and (max-width: 620px) {
16  .header-menu ul li {
17    width: 33%;
18    border-bottom: 1px solid #bababa;
19  }
20
21  .header-menu ul {
22    flex-wrap: wrap;
23  }
24}
25
26@media screen and (max-width: 500px) {
27  .header-menu ul li {
28    width: 50%;
29    font-size: 85%;
30  }
31
32  .at {
33    display: block;
34  }
35}

2/2 16:30　追記
-apple-様
ご指摘ありがとうございます。
head内の記述を追加いたします。

HTML
1<head>
2  <meta charset="UTF-8">
3  <meta name="viewport" content="width=device-width, initial-scale=1">
4  <meta http-equiv="X-UA-Compatible" content="ie=edge">
5
6  <meta name="twitter:card" content="summary_large_image" />
7<meta name="twitter:site" content="@yu_ki01_17" />
8<meta property="og:url" content="http://yunkym.com" />
9<meta property="og:title" content="ポートフォリオ" />
10<meta property="og:description" content="レスポンシブデザインを学習したのでポートフォリオを作りました。" />
11<meta property="og:image" content="http://yunkym.com/image-zoo/topic2.JPG" />
12
13  <title>zoo-tpia</title>
14  <link rel="stylesheet" href="zoo-tpia-top.css">
15  <link rel="stylesheet" href="responsive-zoo.css" media="screen and (max-width: 960px)">
16</head>