LPのヘッダーをスマホサイズのスクリーンで正しく表示したい

前提・実現したいこと

isaraというLP模写をして学習をしています。
そのサイトにスマホ用のレイアウトを実装しようと思いましたができません。
responsive.cssにスマホ用のレイアウトを実装したいです。
responsive.cssでhmax-width: 768pxを指定しましたが実際には1000pxとヘッダーのみ物凄く大きくなりました。
どうすればheaderのwidthが768px以内に収まるか知りたいです。
よろしくお願いします。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" href="isara.css">
8    <link rel="stylesheet" href="responsive.css">
9    <script src="jquery-3.5.1.min.js"></script>
10    <script src="isara.js"></script>
11</head>
12<body>
13    <header>
14        <div class="header-in">
15            <div class="header-left">
16                <img src="isara_img/isaralogo.png" alt="isara">
17                <p>バンコクのノマドエンジニア育成講座</p>
18            </div>
19            <div class="header-right">
20                <p>お問い合わせ / 資料請求はこちら</p>
21            </div>
22            <div class="header-right-mini">
23                <img src="" alt="">
24                <p>資料請求</p>
25            </div>
26        </div>
27    </header>
28</body>

isaracss
1* {
2    padding: 0;
3    margin: 0;
4}
5
6body {
7    text-align: center;
8    color: black;
9    background-color: cornsilk;
10}
11
12ul {
13    list-style: none;
14}
15
16.clear {
17    clear: left;
18}
19
20header {
21    position: fixed;
22    top: 0;
23    z-index: 10;
24    height: 100px;
25    width: 100%;
26    background-color: #fff;
27}
28
29.header-in {
30    position: relative;
31    display: flex;
32    justify-content: space-between; /* 水平両端配置 */
33    align-items: center;  
34}
35
36.header-left {
37    display: flex;
38    align-items: flex-end;
39}
40
41.header-logo {
42    width: 150px;
43    height: auto;
44}
45
46.header-right {
47    position: absolute;
48    left: 70%;
49}
50
51.header-right-mini {
52    display: none;
53    position: absolute;
54    top: 0;
55    right: 0;
56    font-size: 12px;
57    background-color: #da6b64;
58}
59
60.header-right p {
61    color: #fff;
62    cursor: pointer;
63    padding: 11px 40px;
64    background-color: #da6b64;
65    border-radius: 25px;
66}
67
68
69//ここまでがヘッダーのcssです
70

responsivecss
1@media (max-width: 768px) {
2    header {
3        
4    }
5    .heade-in {
6        
7    }
8    .header-left p {
9        font-size: 10px;
10    }
11    .header-left img {
12        width: 90px;
13        height: 32px;
14    }
15    .header-right {
16        display: none;
17    } 
18    .header-right-mini {
19        display: block;
20    }
21}

試したこ

ディベロッパーツールでヘッダーのcssを触ったときに画像です。
width: 100%;を消したときは768px以内に収まりますが、100%とすると大きくはみ出し、ヘッダーが1000pxとなります。100%だと768pxになると思ったのですがなりません。

この画像のこの状態になっている意味が分かりません。
ディベロッパーツールで肌色の余分な部分にカーソルを合わせたときに、htmlのwidthが中身(?)よりも小さくなっています。原因も分かりません。助けてほしいです。

Lhankor_Mhy

2021/01/13 02:10

ご提示のコードを試してみましたが、問題が再現しませんでした。 https://jsfiddle.net/Lhankor_Mhy/6tx7vbg1/ おそらく、ご提示いただいていない部分のコードが原因だと思います。

dododo_pg

2021/01/13 02:38

ありがとうございます！ CSSのコードを追加します。

Lhankor_Mhy

2021/01/13 02:52 編集

質問変更拝読。やはり問題が再現しません。 https://jsfiddle.net/Lhankor_Mhy/6tx7vbg1/1/ header は実際に何pxまで伸びているのですか？

Lhankor_Mhy

2021/01/13 02:54

といいますか、スクリーンサイズ768pxで、header が横に伸びているならば横スクロールが発生していると思いますが、スクリーンショットではそうなっていないようです。スクリーンショットのどの部分が768pxに相当するのかご提示いただけますか？

Lhankor_Mhy

2021/01/13 02:58

あー、なるほど、わかったかもしれません。回答します。

dododo_pg

2021/01/13 03:02

ありがとうございます。ヘッダーは1000pxまで伸びていました。それより下の要素(画像の肌色の部分より左の要素)は768pxでした。

Lhankor_Mhy

2021/01/13 03:21

980px ではなくて 1000px ならば、私の回答は違うかもしれませんね。

dododo_pg

2021/01/13 07:18

すみませんかわりません

Lhankor_Mhy

2021/01/13 07:34

ビューポート設定はどうなっていますか？

dododo_pg

2021/01/13 08:18

ビューポートの設定をソースコードに書きました。 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Lhankor_Mhy

2021/01/13 08:21

ご提示のコードでは問題が再現しません。ただ、編集履歴にあった github page では header が 1000px になることを確認しました。（このコメントについて、知られたくないので消してほしい、ということでしたらお知らせください。）

Lhankor_Mhy

2021/01/14 04:52

言葉が足りなかったかもしれませんが、編集履歴にあった github page に基づいて回答していいのでしょうか？　ということをお聞きしています。

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

回答1件

ベストアンサー

header が 980px になっていませんか？
ビューポート設定が正しくないかもしれません。

html
1  <meta name="viewport" content="width=device-width, initial-scale=1.0">

投稿2021/01/13 02:59

編集2021/01/13 03:01

Lhankor_Mhy

総合スコア36158

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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