レスポンシブデザイン widthについて

Question

起きている問題

これが見本

これが自分の

デベロッパーツールでサイトを確認した時に見本はサイトが画面全体に写っていますが、自分のは端の方が人画面に収まりきっていません。
これは何故でしょうか？

またレスポンシブデザインでwidthを指定する際に親要素にはすべて指定した方が良いのでしょうか？
そうなった場合、全ての画面サイズでwidthに変更を加えないといけなくなると思います。
調べたところ、widthの指定はしない方が良いと書いてありました。
しかしレスポンシブデザインにする際は、要素をwidth: 100%;にした方が良いと書かれているところもありました。（画面サイズが縮んだときに要素からはみ出してしまうため？）
しかしwidth: 100%;を指定するには親要素にwidthの指定が必要なのでどうなのかと、

コード

html

    <header>
        <div class="header">
            <img src="./iSara-img/isaralogo.png">
            <p>バンコクのノマドエンジニア育成講座</p>
            <a href="#contact-form">お問い合わせ / 資料請求はこちら</a>
        </div>
    </header>

    <div class="main-visial">
        <h2>プログラミングで<br>人生の安定を手に入れよう</h2>
        <img src="./iSara-img/isaralogolarge.png">
        <p>バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</p>
    </div>
    <div class="isara-Overview">
        <p>まずは２０日間で、<br>月１０万円稼げるスキルを手にいれよう。</p>
        <p class="text-custom">※受講料は実質0円です。詳しくは資料請求をどうぞ。</p>
        <div class="contact-form-colore">
            <a href="#contact-form">お問い合わせ＆資料請求はこちら</a>
        </div>
        <p>第６期生：2019年11月25日 ~ 2019年12月14日＊締め切りました</p>
        <p>第７期生：2020年2月17日 ~ 2020年3月7日＊締め切りました</p>
        <p>第8期生：2021年内に開催予定＊資料請求受付中です</p>
        <div class="icon">
            <div class="twitter">
                　<a href="//twitter.com/share" class="twitter-share-button" data-text="iSara[イサラ]｜バンコクのノマドエンジニア育成講座"
                    data-url="https://isara.life/">
                    Tweet
                </a>
                <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
            </div>
            <div id="fb-root"></div>
            <script async defer crossorigin="anonymous"
                src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v10.0" nonce="vxDBAq9l"></script>
            <div class="fb-like" data-href="https://isara.life/" data-width="" data-layout="button" data-action="like"
                data-size="small" data-share="true"></div>
        </div>
    </div>

css

* {
    margin: 0;
}
body {
    // width: 1500px;
    letter-spacing: 1px;
}
body,
img,
li,
ul {
    padding: 0;
    margin: 0;
}
p {
    font-size: 20px;
}

header {
    .header {
        display: flex;
        height: 80px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        background-color: $white;
        img {
            width: 150px;
            height: 50px;
            margin: 15px 0 0 140px;       
        }
        p {
            margin-top: 40px;
            font-size: 14px;
            white-space: nowrap;
        }
        a {
            display: block; 
            background-color: $red;
            border-radius: 100px;
            height: 45px;
            line-height: 40px;
            text-align: center;
            margin: 20px 0px 15px auto;
            margin-right: 50px;
            width: 300px;
            //padding: 0px 50px;
            text-decoration: none;
            font-size: 14px;
            color: $white;
            
        }
        a:hover {
            background-color: $red-hover;
        }
    }
}

.main-visial {
    height: 500px;
    margin-top: 80px;
    text-align: center;
    background-image: url("./iSara-img/main-visial.jpg");
    background-size: cover;
    background-position: center center;
    h2 {
        padding-top: 100px;
        font-size: 28px;
    }
    img {
        width: 290px;
        height: 100px;
    }
    p {
        font-weight: 600;
        padding-top: 30px;
    }
}

.isara-Overview {
    text-align: center;
    background-color: $yellow;
    padding-bottom: 100px;
    p {
        padding-top: 40px;
        color: $white;
    }
    p.text-custom {
        display: inline-block;
        background-color: $white;
        padding: 0;
        margin-top: 20px;
        color: $red-2;
        font-size: 18px;
        border-radius: 5px;
    }
    a {
        display: inline-block;
        background-color: $red;
        border-radius: 100vw;
        margin-top: 50px;
        //height: 100px;
        line-height: 100px;
        text-align: center;
       // width: 1030px;
        padding: 50px 200px;
        text-decoration: none;
        font-size: 28px;
        color: $white;
    }
    a:hover {
        background-color: $red-hover;
    }
    .icon {
        display: flex;
        justify-content: center;
        width: 500px;
        margin: 0 auto;
        vertical-align: center;
        padding-top: 20px;
    }
}

Comments

[miyabi_pudding]

ソースコードの記載がないと、回答しようがありません。
HTMLとCSSのソースコードを記載してください。

[M_Ren]

コード追記しました。

一つ目の質問の、デベロッパーツールの表示がおかしい件については、単純にPC画面がアップされていただけでした。自分の確認不足でした。

二つ目の質問のレスポンシブデザインにする際の親要素（そこのページの大元の親要素）へのwidth指定はあった方が良いのでしょうか？
例えば、全ての親要素を1000pxなどで統一した方がいいのでしょうか？

[miyabi_pudding]

質問の編集、ありがとうございます。
回答に移ろうと思いますが、
一つ目の、
> 自分のは端の方が人画面に収まりきっていません。
これは解決した、ということでよろしいでしょうか？

[M_Ren]

はい、そちらは解決しました。

[miyabi_pudding]

ありがとうございます。
それでは回答に移ります。

Answer 1

またレスポンシブデザインでwidthを指定する際に親要素にはすべて指定した方が良いのでしょうか？

要件によります。

調べたところ、widthの指定はしない方が良いと書いてありました。

上記の通り、要件にもよりますが、
ほとんどの場合は、
質問者さんが調べた通り、
指定の必要はありません。
なぜなら、
**ブロック要素は基本的には、デフォルトでwidthは100%（に似た状態）**であるからです。
基本は親要素に対していっぱいいっぱいの横幅になるということです。
ただし、要件によってはあえてwidth: 100%を指定する場合もあります。
（親は横幅を明示させなければ、子要素のレイアウトが難しい、などの場合）

しかしレスポンシブデザインにする際は、要素をwidth: 100%;にした方が良いと書かれているところもありました。

参考記事を記載いただいていないので、なんとも言えませんが、
何がなんでも、というわけではありません。
width: 100%とは、親要素に対して横幅を100%にするという指定のため、
子要素に対して、横幅を明示的に指定している場合は、親に対して指定する必要はありません。
（横幅明示指定の要素がなく、bodyまで遡る場合は、必然、bodyいっぱいいっぱいと同等の横幅となるため）
なので、何度も記載した通り、最終的には要件によるの一言に尽きます。

Comments

[M_Ren]

特別、margin: 0 auto; などをつけたいなどの要件がなければ基本的には必要ないということですね。
すごく納得できました。ありがとうございます。