レスポンシブ対応をさせたいです

### 前提・実現したいこと
サイトのレスポンシブ対応をさせたいです
ここに質問の内容を詳しく書い
現在、html5,css3で模写コーディングをしているのですが、スマホ対応するためにレスポンシブ対応をしたいのですが、画像のように、なぜかElementsパネルでIPHONEXで１００％にしても表示されるされる位置がずれてしまいます。

ドットインストールのサイトにあった物を模写したのでソースコードを確認して直そうと思ったところ、自分のコードとソースコードが全然違ったので直しようがななく困っています。
どうしたらいいか教えてください
ここに言語を入力

html5,css3
1コード

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

pc版サイトは平気だが、スマホ版で表示すると、サイズが小さくなってしまう。
1 
2エラーメッセージ
3```無し
4
5### 該当のソースコード
6```html5
7コード
8<!DOCTYPE html>
9<html lang="ja">
10    <head>
11        <meta charset="utf-8">
12        <title>サイト１</title>
13        <link rel="stylesheet" href="css/styles.css">
14    </head>
15    <body>
16        <header>
17            <h1 class="hh1">すごいアプリ</h1>
18            <p class="p1">ウルトラすごい最高なアプリです</p>
19            <a href="" id="btn">ダウンロード</a><br>
20            <img id="img1" src="MyAwesomeApp/img/top.png">
21        </header>
22        <main>
23            <section class="feature1">
24                <h1 class="hh2">すごい特徴</h1>
25                    <section>
26                    <div class="container">
27                    <img id="img2" src="MyAwesomeApp/img/feature1.png">
28                    <h2 class="hh3">すごい</h2>
29                    <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
30                    </section>
31    
32                    <section>
33                    <img id="img2" src="MyAwesomeApp/img/feature2.png">
34                    <h2 class="hh3">すごい</h2>
35                    <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
36                    </section>
37    
38                    <section>
39                    <img id="img2" src="MyAwesomeApp/img/feature3.png">
40                    <h2 class="hh3">すごい</h2>
41                    <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
42                    </section>
43                </div>
44            </section>
45            <section class="members">
46                <h1>メンバー紹介</h1>
47            <ul>
48                <li>
49                    <img id="img3" src="MyAwesomeApp/img/member1.png">
50                    <h2>山田太郎</h2>
51                    <p class="p3">がんばります。がんばります。がんばります</p>
52                </li>
53                <li>
54                    <img id="img3" src="MyAwesomeApp/img/member2.png">
55                    <h2>山田二郎</h2>
56                    <p class="p3">がんばります。がんばります。がんばります</p>
57                </li>
58                <li>
59                    <img id="img3" src="MyAwesomeApp/img/member3.png">
60                    <h2>山田花子</h2>
61                    <p class="p3">がんばります。がんばります。がんばります</p>
62                </li>
63            </ul>
64            </section>
65            <section class="info">
66                <h1>今すぐダウンロード</h1>
67                <div id="btn">ダウンロード</div>
68            </section>
69            <footer>
70                <p class="p4">&copy;&nbsp;dotinstall.com</p>
71            </footer>
72        </main>
73    </body>
74</html>

css3
1ソースコード
2body {
3    margin: 0;
4}
5
6header h1,
7.headre p {
8    margin: 0;
9}
10
11header {
12    background: orange;
13    color: white;
14    text-align: center;
15    padding-top: 40px;
16}
17
18header img {
19    width: 280px;
20    vertical-align: bottom;
21}
22
23#btn {
24    width: 140px;
25    line-height: 44px;
26    background: white;
27    text-decoration:  none;
28    color: orange;
29    font-weight: bold;
30    font-size: 14px;
31    margin: 40px auto 48px;
32    display: block;
33    border-radius: 4px;
34    text-align: center;
35}
36
37#btn:hover {
38    cursor: pointer;
39    opacity: 0.8;
40}
41
42.hh2 {
43    padding: 30px; 
44    text-align: center;
45    font-weight: normal; 
46}
47
48#img2 {
49    padding: 20px 75px;
50}
51
52.p2 {
53    padding-left: 72px;
54}
55
56.hh3 {
57    font-size: 20px;
58    padding: 10px 72px;
59    margin: 0px;
60}
61
62.members ul {
63    list-style: none;
64    margin: 0;
65}
66
67.members h1 {
68    font-weight: normal;
69    font-size: 23px;
70    text-align: center;
71    padding-top: 70px;
72}
73
74.members h2 {
75    font-size: 20px; 
76}
77
78#img3 {
79    border-radius: 50%;
80    width: 155px; 
81}
82
83.members {
84    background: rgb(238, 238, 238);
85    text-align: center;
86    margin: 0;
87    padding: 0;
88}
89
90ul li {
91    margin: 0;  
92}
93
94.members p {
95    padding-bottom: 70px; 
96    margin: 0;
97}
98
99.info {
100    background: orange;
101    margin: 0;
102    padding: 64px 0;
103
104}
105
106.info h1 {
107    font-weight: normal;
108    color: white;
109    text-align: center;
110}
111
112footer {
113    background: rgb(57, 56, 56);
114    height: 150px;
115}
116.p4 {
117    color: rgb(199, 189, 189);
118    margin: 0;
119    text-align: center;
120    align-items: center;
121    line-height: 140px;
122}
123

試したこと

ここに問題に対して試したことを記載してください。
・各要素のwidthの変更
・googleでレスポンシブ対応について調べる
・googleで、「レスポンシブ対応　要素が小さくなる」と調べたが、いまいちわからない

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

・pc -> macbook air 13インチ
・ブラウザ -> 最新のchroomeブラウザ
・テキストエディタ -> 最新のvscode
ここにより詳細な情報を記載してください。

kyoya0819

2020/03/15 02:24

おそらく途中で投稿されてしまっています。質問の修正をお願いします。

kotouharuto

2020/03/15 02:49

ご指摘ありがとうございます！初めて投稿したため、投稿を誤ってしまいました。ただいま投稿し直しました！

m.ts10806

2020/03/15 03:13

自力で対応しきるよりフレームワーク使われたほうが良いと思いますが、それで満たせない要件は何でしょうか

kotouharuto

2020/03/15 12:58 編集

ご回答ありがとうございます。ブートストラップなどのことですね、使ってみます！満たされない用件は上に書いてある通り、スマホ表示したら、表示される位置がずれているということです。回答者様の聞かれたことと、自分の答えが違ったらすいません。

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

回答1件

viewportをheadに入れれば良いのでは？
どちらにせよレスポンシブデザインにするならviewportを使わない手はありません。

HTMl
1
2<meta name="viewport" content="width=device-width,initial-scale=1">
3

投稿2020/03/15 03:58

kyoya0819

総合スコア10429

kotouharuto

2020/03/15 07:46

申し訳ないです、書くのを忘れていたのですがviewportも一度でも入れてみたのですが、解決できませんでした...

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

レスポンシブ対応をさせたいです

発生している問題・エラーメッセージ

試したこと

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

関連した質問