親要素からはみ出してしまうpaddingが無効になってしまう

模写コーディング練習を行なっているのですが親要素をはみ出る、paddingが使えません

この空白はmarginによるものだと分かっているのですが親要素をなぜはみ出してしまっているのかが理解できません
下のようになることが理想です

header 
{
  background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_header_pink-4704d42ed44908fb061e80afc515a93ab2fcbfd605c2580de486a4d980b2115a.jpg);
  height:100vh;
  background-size: cover;
  padding-top: 48px;
  background-position: center;
  position: relative;
}

p {
    margin:0;
}


.body {
    font-size:14px;
}

.logo {
   background-image: url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/header_logo-0dbc9cb7c037472d3bf71fde0c1d3efd708c2c2547e9ed3e420051ca826cdad8.png);
   margin: 0 auto 16px;
   width: 131px;
   height: 116px;
   background-repeat: no-repeat;
   background-size:contain;
   background-position: center;
   margin-top:5vh;

}

.tagline {
     color:white;
     text-align: center;
     

}

.download-wrapper {
    padding-top:24px;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    bottom:24px;
    left:0px;
    right: 0px;
}

.download-item {
    padding:24px 16px;

}



.download {
    display: inline;
    background-color: black;
    border-radius: 3px;
    padding: 20px 29px;
    color:white

}

.download.for-ios {
    margin-right: 10px;
}

.download-wrapper p {
    color:white;
    padding-top:100px;
}


body, h2, h3, h4, p {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.6;
    letter-spacing: 0.05rem;
}



.service2{
    display: flex;
}


.item {
    color: white;
    width:calc(100%/3);
    
    
}

.item1 {
    background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service01-01ee576583ddad054106d9f2dc78caf78be6c829383351a4fbc99ac5a566020a.jpg);
    background-size:cover;
    padding: 8vmin 6vmin;
    background-position:center bottom;
    min-height: 540px;
    line-height: 1.6;
}


.item2 {
    background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service02-cd59d8cd17b05503a9fc3eeae42d618d0cc19b2277b581f5db275d5dde09e94d.jpg);
    padding:8vmin 6vmin;
    background-position: center bottom;
    background-size:cover;
    min-height: 540px;

    
}

.item3 {
    background-image:url("https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service03-4c44f872ed6f7ed3007faeb109b1e03ceabcdb3106ba54392a5457a159a0f2ab.jpg");
    padding:8vmin 6vmin;
    min-height:540px;
    background-size:cover;
    background-position:center bottom;
}


.price {
    text-align: center;
    min-height:578px;
    padding:16vmin 6vmin 20vmin;
    background: #c8ccbc;
}

.heading {
    position: relative;
}

.free-image {
    width:125px;
    height:46px;
    top:80px;
    right: 90px;
}

.price-image {
    margin-bottom:16px;
    
}


.freetrial {
    position: absolute;
    top:80px;
    right:600px;

}


.image {
    width:200px;
    height:200px;
    text-align: center;
}


.item-frequency {
    padding: 16vmin 0 20vmin;

}

.calender {
    background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/img_frequency-e1cc7b2fcecb9a18105144861c456538abb21a5049fe1d320846cb61e42d1fdd.png);
    margin:24px;
    background-position:center;
    background-size:contain;
    height:156px;
    background-repeat:no-repeat;
}


.flower {
    background-color:#EAD5DC;
    padding:0px,6vmin;
}

.flower.container {
    height:730px;
    display:flex;
    flex-flow: column wrap;
}

.flower-title {
    margin-top:140px;
    margin-bottom:24px;
    order:2;
    
}

.flower-image {
    background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_flower-1a07674a0e731b035e9344d0b0ec772eb116759368da38dc0b21bec925479009.jpg);
    background-size:contain;
    background-position: center;
    height:730px;
    background-repeat: no-repeat;
}

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="mosh1.css">
    <title>mosha1-flower</title>
</head>
<body>
    <header>
        <div class="logo"></div>
        <div class="tagline">
            かわいいが届くお花便
        </div>
        <div class="download-wrapper">
          <div class="download-item">
            <div class="container">
            <a class="download for-ios" href="https://flowr.page.link/88Lt">App Store</a>
            <a class="download for-andoroid" href="https://flowr.page.link/19mT">Google Play</a>
            <p>* 北海道、沖縄、離島エリアは現在対象外です</p>
            </div>
          
          </div>
        </div>
    </header>
    

    <section class="service">
      <div class="service2">
        
        <div class="item item1">
          <h2>届くのは<br>あなたの好みのお花だけ</h2>
          <p>
            FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる複数のお花から毎回好きなものが選べます。
          </p>
        </div>

        <div class="item item2">
         <h2>お花はポストに投函<br>忙しくても大丈夫</h2>
         <p>
          お花は専用BOXに入れてポストに直接お届け。不在で受け取れなくても安心して使えます。
         </p>  
        </div>
        
        <div class="item item3">
          <h2>FLOWERなら<br>いつもかわいく飾れる</h2>
          <p>
            専用の花器を使うと、届いたお花をさっと生けるだけでかわいい空間のできあがり。お花のある暮らしがもっと楽しくなります。
          </p>
        </div>

      </div>
    </section>

    <section class="price">
      <div class="container">
        <div class="item-contents">
          <div class="heading">
          <h2>お部屋に飾りやすいサイズの<br>ブーケをワンコインで</h2>
         </div>

         <div class="freetrial">
            <img class="free-image" src="https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/price_freetrial-f9eff918f8de1901e1e25d84228cb3ab5eb126f5c2469cfc03ea46b507f29e49.png">
         </div>
         
         <div class="price-image">
            <img  class="image" src="https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/price_bouquetimg-9d58e59120ae586337c3b91a2f531ad14e7b05dc3d3ec63ab0ee68b41c8852fb.png">
            <p>お花とグリーン5本〜6本のブーケ</p>
            <p class="large">500円<span>/1回</span></p>
         </div>
         <div class="footnote">
           <p>送料は360円です</p>
           <p>価格は税別です</p>
         </div>
        </div>
      </div>

      <div class="item-frequency">
        <h2>月に2回の注文で、<br>お花がいつもあるちょうどいいペース</h2>
        <div class="calender">

        </div>
      </div>
    </section>

    <section class="flower">
     <div class="container">
      <div class="flower-title">
       <h2>どんなお花が届くの？</h2>
      </div>
     <div class="flower-image"></div>
      <div class="detail">
       <h3>かわいいお花だけ</h3>
       <h3>元気な状態で</h3>
       <p>色やサイズなど、かわいくおしゃれに飾れるお花にこだわってセレクト。季節やトレンドに合わせてブーケを作っています。</p>
       <p>あらかじめ飾るのに最適な長さに茎をカットしてお届け。箱から出して、そのまま花器に入れるだけでOKです.</p>
       <h3>そのまま飾れる</h3>
       <p>あらかじめ飾るのに最適な長さに茎をカットしてお届け。箱から出して、そのまま花器に入れるだけでOKです。</p>
      </div>

     
     

    </div>
    </section>
    
</body>
</html>

試したこと

前回の自分の質問を踏まえて考えてみた
paddingが適用されないときのことについて調べた

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

回答1件

ベストアンサー

CSSに下記を追加してみてください。

css
1body {
2  margin: 0;
3  paddingi: 0;
4}

ブラウザのデフォルトの余白なので、それを打ち消せばいいのです。

投稿2020/09/24 07:57

hatena19

総合スコア34075

退会済みユーザー

2020/09/25 06:48 編集

回答ありがとうございます

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

親要素からはみ出してしまうpaddingが無効になってしまう

試したこと

関連した質問