70117


**現象**  
[出張 - Airbnb](https://www.airbnb.jp/work)
のページを模写しておりますが、サイト全体の上下左右に余白ができてしまいます。

ご教授よろしくお願いいたします。

[![画像の説明をここに入力](https://i.stack.imgur.com/1uZUt.jpg)](https://i.stack.imgur.com/1uZUt.jpg)

**期待値**  
サイト全体の上下左右の余白を無くしたいです。

**再現手順**  
下記コードを実行すると再現できます。

index.html

[code]

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="reset" href="reset.css">
        <link rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <header>
            <div class="header-upper-row">
                <a href=""><img src="" alt=""></a>
                <a href="">日本語(JP)</a>
                <a href="">¥JPY</a>
                <a href="">ホストをはじめる</a>
                <a href="">ヘルプ</a>
                <a href="">登録する</a>
                <a href="">ログイン</a>
            </div>
            <div class="header-lower-tier">
                <h1>世界の果てまで、アット<br>ホーム</h1>
                <a href="">Airbnbビジネスプログラムの動画を見る</a>
                <form action="#" method="POST">
                    <label for="mail">まずは仕事用メールアドレスの入力から</label><br>
                    <input type="email" name="mail">
                    <input type="submit" value="メールアドレスを追加">
                </form>
                <p>出張管理をご担当ですか？</p>
                <a href="#">もっと詳しく</a>
                <a href="#">停止</a>
            </div>
        </header>
    
        <div class="main">
    
            <div class="middle-1">
                <h1>最高の仕事に必要なものすべてを完備</h1>
                <div class="middle-1-item">
                    <img src="./mosha_1_img/top_rated_homes.594e0eb1.jpg" alt="高評価の宿泊先&デザイナーズホテル">
                    <p>高評価の宿泊先&デザイナーズホテル</p>
                </div>
                <div>
                    <img src="./mosha_1_img/team_building_experiences.3f19ab77.jpg" alt="チームビルディング体験">
                    <p>チームビルディング体験</p>
                </div>
                <div>
                    <img src="./mosha_1_img/collaborate.57a5ee7e.jpg" alt="コラボを育むスペース">
                    <p>コラボを育むスペース</p>
                </div>
            </div>
    
            <div class="middle-2">
                <div class="middle-2-image">
                    <img src="./mosha_1_img/comfort_home.59ad50c8.jpg" alt="出張先でも、アットホーム">
                </div>
                <div class="middle-2-text">
                    <h1>出張先でも、アットホーム</h1>
                    <p>出張のときも、新天地に移動のときも安心。他の出張者が5つ星評価をつけたお部屋やデザイナーズホテルを探しましょう。</p>
                    <a href="#">仕事用スペースを完備した宿泊先を検索</a>
                </div>
            </div>
    
            <div class="middle-3">
                <div class="middle-3-image">
                    <img src="./mosha_1_img/team_building_made_easy.c9d2a84f.jpg" alt="チームの心をひとつに">
                </div>
                <div class="middle-3-text">
                    <h1>チームの心をひとつに</h1>
                    <p>ラーメン作り教室やカヌーレッスンに参加。普段オフィスでは目にできない同僚たちの意外な面に触れ、深いレベルでつながれます。</p>
                    <a href="#">Airbnbの「体験」を検索</a>
                </div>
            </div>
    
            <div class="middle-4">
                <div class="middle-4-image">
                    <img src="./mosha_1_img/creativity.739950af.jpg" alt="創造力をかきたてるスペース">
                </div>
                <div class="middle-4-text">
                    <h1>創造力をかきたてるスペース</h1>
                    <p>煮詰まったら1日オフサイトで気分を変えてみませんか？ひらめきが湧く環境で、チームの生産性を高めましょう。</p>
                    <a href="#">Wi-Fi完備の宿泊先を見る</a>
                </div>
            </div>
    
            <div class="middle-5">
                <div class="middle-5-text">
                    <h1>安全第一のシステム</h1>
                    <p>セキュアな支払いシステムから経験者のレビューまで、Airbnbは安全中心のシステムです。</p>
                    <a href="#">もっと詳しく</a>
                </div>
                <div class="middle-5-text">
                    <h1>グローバルカスタマーサポート</h1>
                    <p>専門スタッフが、年中無休で営業時間内に11言語でサポートいたします。</p>
                    <a href="#">もっと詳しく</a>
                </div>
            </div>
    
            <div class="middle-6">
                <div class="middle-6-image">
                    <img src="./mosha_1_img/quote_image.c1dba850.jpg" alt="自炊">
                </div>
                <div class="middle-6-text">
                    <p>「Airbnbは自活できるのがいいですね。毎晩外食しなくても、みんなで好きなものを料理できるし、とても出張とは思えないほど現地に根を下ろせます」</p>
                    <p>MARTA KUTT様</p>
                    <p>Transferwise社マネージャー</p>
                </div>
            </div>
    
            <div class="middle-7">
                <div class="middle-7-title">
                    <h1>働き方を変えたいなら、Airbnbです</h1>
                </div>
                <div>
                    <form action="#" method="post">
                        <label for="mail">まずは仕事用メールアドレスの入力から</label><br>
                        <input type="email" name="mail">
                        <input type="submit" value="メールアドレスを追加">
                    </form>
                </div>
                <div class="middle-7-text">
                    <p>出張管理をご担当ですか？</p>
                    <ｐ>こんなにある、Airbnbビジネスプログラム法人企業様のメリット。</p>
                    <a href="#">もっと詳しく</a>
                </div>
            </div>
    
            <footer>
                <div class="company-information">
                    <p>企業情報</p>
                    <a href="#">Airbnbのご利用方法</a>
                    <a href="#">ニュースルーム</a>
                    <a href="#">Airbnb Plus</a>
                    <a href="#">Airbnb Luxe</a>
                    <a href="#">HotelTonight</a>
                    <a href="#">Airbnbビジネスプログラム</a>
                    <a href="#">オリンピック</a>
                    <a href="#">採用情報</a>
                </div>
                <div class="community">
                    <a href="#">ダイバーシティ＆ビロンギング</a>
                    <a href="#">アクセシビリティ対応</a>
                    <a href="#">Airbnbアソシエイト</a>
                    <a href="#">お友達を招待</a>
                </div>
                <div class="host">
                    <a href="#">お部屋を掲載</a>
                    <a href="#">オンライン体験をホストする</a>
                    <a href="#">体験をホストする</a>
                    <a href="#">CEOブライアン・チェスキーからのメッセージ</a>
                    <a href="#">責任あるホスティング</a>
                    <a href="#">オープンホーム</a>
                    <a href="#">リソースセンター</a>
                    <a href="#">コミュニティセンター</a>
                </div>
                <div class="support">
                    <a href="#">新型コロナウイルスに関する最新情報</a>
                    <a href="#">ヘルプセンター</a>
                    <a href="#">キャンセルオプション</a>
                    <a href="#">近隣コミュニティサポート</a>
                    <a href="#">信頼＆安全</a>
                </div>
    
                <div class="copyright-etc">
                    <p>Airbnb Global Services Limited</p>
                    <p>観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</p>
                    <p>© 2020 Airbnb,Inc. All rights reserved</p>
                    <p>・</p>
                    <a href="#">プライバシー</a>
                    <p>・</p>
                    <a href="#">利用規約</a>
                    <p>・</p>
                    <a href="#">サイトマップ</a>
                    <p>・</p>
                    <a href="#">企業情報</a>
                </div>
                <div class="japanese-jpy">
                    <a href="#">日本語(JP)</a>
                    <a href="#">JPY</a>
                </div>
                <div class="SNS-icons">
    
                </div>
            </footer>
    
        </div>
    </body>
    </html>
    
[/code]

stylesheet.css

[code]

    header {
        padding: 0px;
        background-image: url(./mosha_1_img/68f5f594-985e-48dc-8c82-ec1e090c6b3a.jpg);
        background-size: cover;
    }
    
[/code]

reset.css

[code]

    * {
        margin: 0px;
        padding: 0px;
    }
    
[/code]


CC BY-SA 4.0
2020-09-03T21:33:56.627
70116
2020-09-04T05:17:27.590
2020-09-04T05:17:27.590
3060
36906
question
html css html5
ページ全体 (上下左右) の余白を無くすことができません


`reset.css` ファイルを読み込んでいる `link` 要素の `rel` 属性へ設定している値が、 **`stylesheet` ではなく
`reset` となっている**ことが原因です。`rel` 属性へ `stylesheet` という値を指定していない状態では、 `reset.css`
ファイルは装飾用の外部ファイルであると認識されず、読み込まれません。次のように修正を施すことで、問題を解決出来ます。

[code]

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <header>
            <div class="header-upper-row">
                <a href=""><img src="" alt=""></a>
                <a href="">日本語(JP)</a>
                <a href="">¥JPY</a>
                <a href="">ホストをはじめる</a>
                <a href="">ヘルプ</a>
                <a href="">登録する</a>
                <a href="">ログイン</a>
            </div>
            <div class="header-lower-tier">
                <h1>世界の果てまで、アット<br>ホーム</h1>
                <a href="">Airbnbビジネスプログラムの動画を見る</a>
                <form action="#" method="POST">
                    <label for="mail">まずは仕事用メールアドレスの入力から</label><br>
                    <input type="email" name="mail">
                    <input type="submit" value="メールアドレスを追加">
                </form>
                <p>出張管理をご担当ですか？</p>
                <a href="#">もっと詳しく</a>
                <a href="#">停止</a>
            </div>
        </header>
    
        <div class="main">
    
            <div class="middle-1">
                <h1>最高の仕事に必要なものすべてを完備</h1>
                <div class="middle-1-item">
                    <img src="./mosha_1_img/top_rated_homes.594e0eb1.jpg" alt="高評価の宿泊先&デザイナーズホテル">
                    <p>高評価の宿泊先&デザイナーズホテル</p>
                </div>
                <div>
                    <img src="./mosha_1_img/team_building_experiences.3f19ab77.jpg" alt="チームビルディング体験">
                    <p>チームビルディング体験</p>
                </div>
                <div>
                    <img src="./mosha_1_img/collaborate.57a5ee7e.jpg" alt="コラボを育むスペース">
                    <p>コラボを育むスペース</p>
                </div>
            </div>
    
            <div class="middle-2">
                <div class="middle-2-image">
                    <img src="./mosha_1_img/comfort_home.59ad50c8.jpg" alt="出張先でも、アットホーム">
                </div>
                <div class="middle-2-text">
                    <h1>出張先でも、アットホーム</h1>
                    <p>出張のときも、新天地に移動のときも安心。他の出張者が5つ星評価をつけたお部屋やデザイナーズホテルを探しましょう。</p>
                    <a href="#">仕事用スペースを完備した宿泊先を検索</a>
                </div>
            </div>
    
            <div class="middle-3">
                <div class="middle-3-image">
                    <img src="./mosha_1_img/team_building_made_easy.c9d2a84f.jpg" alt="チームの心をひとつに">
                </div>
                <div class="middle-3-text">
                    <h1>チームの心をひとつに</h1>
                    <p>ラーメン作り教室やカヌーレッスンに参加。普段オフィスでは目にできない同僚たちの意外な面に触れ、深いレベルでつながれます。</p>
                    <a href="#">Airbnbの「体験」を検索</a>
                </div>
            </div>
    
            <div class="middle-4">
                <div class="middle-4-image">
                    <img src="./mosha_1_img/creativity.739950af.jpg" alt="創造力をかきたてるスペース">
                </div>
                <div class="middle-4-text">
                    <h1>創造力をかきたてるスペース</h1>
                    <p>煮詰まったら1日オフサイトで気分を変えてみませんか？ひらめきが湧く環境で、チームの生産性を高めましょう。</p>
                    <a href="#">Wi-Fi完備の宿泊先を見る</a>
                </div>
            </div>
    
            <div class="middle-5">
                <div class="middle-5-text">
                    <h1>安全第一のシステム</h1>
                    <p>セキュアな支払いシステムから経験者のレビューまで、Airbnbは安全中心のシステムです。</p>
                    <a href="#">もっと詳しく</a>
                </div>
                <div class="middle-5-text">
                    <h1>グローバルカスタマーサポート</h1>
                    <p>専門スタッフが、年中無休で営業時間内に11言語でサポートいたします。</p>
                    <a href="#">もっと詳しく</a>
                </div>
            </div>
    
            <div class="middle-6">
                <div class="middle-6-image">
                    <img src="./mosha_1_img/quote_image.c1dba850.jpg" alt="自炊">
                </div>
                <div class="middle-6-text">
                    <p>「Airbnbは自活できるのがいいですね。毎晩外食しなくても、みんなで好きなものを料理できるし、とても出張とは思えないほど現地に根を下ろせます」</p>
                    <p>MARTA KUTT様</p>
                    <p>Transferwise社マネージャー</p>
                </div>
            </div>
    
            <div class="middle-7">
                <div class="middle-7-title">
                    <h1>働き方を変えたいなら、Airbnbです</h1>
                </div>
                <div>
                    <form action="#" method="post">
                        <label for="mail">まずは仕事用メールアドレスの入力から</label><br>
                        <input type="email" name="mail">
                        <input type="submit" value="メールアドレスを追加">
                    </form>
                </div>
                <div class="middle-7-text">
                    <p>出張管理をご担当ですか？</p>
                    <ｐ>こんなにある、Airbnbビジネスプログラム法人企業様のメリット。</p>
                    <a href="#">もっと詳しく</a>
                </div>
            </div>
    
            <footer>
                <div class="company-information">
                    <p>企業情報</p>
                    <a href="#">Airbnbのご利用方法</a>
                    <a href="#">ニュースルーム</a>
                    <a href="#">Airbnb Plus</a>
                    <a href="#">Airbnb Luxe</a>
                    <a href="#">HotelTonight</a>
                    <a href="#">Airbnbビジネスプログラム</a>
                    <a href="#">オリンピック</a>
                    <a href="#">採用情報</a>
                </div>
                <div class="community">
                    <a href="#">ダイバーシティ＆ビロンギング</a>
                    <a href="#">アクセシビリティ対応</a>
                    <a href="#">Airbnbアソシエイト</a>
                    <a href="#">お友達を招待</a>
                </div>
                <div class="host">
                    <a href="#">お部屋を掲載</a>
                    <a href="#">オンライン体験をホストする</a>
                    <a href="#">体験をホストする</a>
                    <a href="#">CEOブライアン・チェスキーからのメッセージ</a>
                    <a href="#">責任あるホスティング</a>
                    <a href="#">オープンホーム</a>
                    <a href="#">リソースセンター</a>
                    <a href="#">コミュニティセンター</a>
                </div>
                <div class="support">
                    <a href="#">新型コロナウイルスに関する最新情報</a>
                    <a href="#">ヘルプセンター</a>
                    <a href="#">キャンセルオプション</a>
                    <a href="#">近隣コミュニティサポート</a>
                    <a href="#">信頼＆安全</a>
                </div>
    
                <div class="copyright-etc">
                    <p>Airbnb Global Services Limited</p>
                    <p>観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</p>
                    <p>© 2020 Airbnb,Inc. All rights reserved</p>
                    <p>・</p>
                    <a href="#">プライバシー</a>
                    <p>・</p>
                    <a href="#">利用規約</a>
                    <p>・</p>
                    <a href="#">サイトマップ</a>
                    <p>・</p>
                    <a href="#">企業情報</a>
                </div>
                <div class="japanese-jpy">
                    <a href="#">日本語(JP)</a>
                    <a href="#">JPY</a>
                </div>
                <div class="SNS-icons">
    
                </div>
            </footer>
    
        </div>
    </body>
    </html>
    
[/code]


CC BY-SA 4.0
2020-09-03T23:17:19.597
70117
2020-09-03T23:17:19.597
32986
70116
answer