常連

プロゲートを終えて模写コーディングをしていて疑問に思ったのですが
模写コーディングでは画面のサイズを意識してコーディングしなくても画面の縮小拡大をすれば綺麗にコーディングされるのですが、プロゲートでは下の画像ようになってしまいます。
この違いはなんなのか分かりません

どちらともレスポンシブのことは書いていません
![イメージ説明](14d1527ae3d9e2f4f5f5f2d8ff024283.png)
![イメージ説明](a81356ceb75529812951add71008a0c6.jpeg)

### プロゲートサイトのコード
```ここに言語を入力
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>progate</title>
    <link rel="stylesheet" href="progate-css.css">
  </head>
    <body>

        <div class="top-wrapper">
         <div class="container">
               <h1>LEARN TO CODE</h1>
               <h1>LEARN TO BE CREATIVE</h1>
               <p>Progateはオンラインプログラミング学習サービスです。</p>
               <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 
            <div class="btn-wrapper">
             <a  href="#" class="btn sign-up">新規登録はこちら</a>
             <p>or</p>
             <a href="#" class="btn twitter">twitterでログイン</a>
             <a href="#" class="btn facebook">facebookでログイン</a>
            </div>
          </div>
        </div>

        <div class="lesson-wrapper">
            <div class="container">
             <div class="heading">
                 <h2>Learn Where to Get Started!</h2>
             </div>
             
             <div class="lessons">
                 <div class="lesson">
                     <div class="lesson-icon">
                         <img src="https://prog-8.com/images/html/advanced/html.png">
                         <p>HTML & CSS</p>
                     </div>
                     <p class="txt-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
                 </div>

                  <div class="lesson">
                     <div class="lesson-icon">
                        <img src="https://prog-8.com/images/html/advanced/jQuery.png">
                        <p>jQuery</p>
                     </div>
                     <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
                 </div>

                 <div class="lesson">
                     <div class="lesson-icon">
                        <img src="https://prog-8.com/images/html/advanced/ruby.png">
                        <p>Ruby</p>
                     </div>
                     <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
                 </div>

                 <div class="lesson">  
                     <div class="lesson-icon">
                        <img src="https://prog-8.com/images/html/advanced/php.png">
                        <p>PHP</p>
                   </div>
                     <p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
              </div>
                
             
            </div>
            </div>
        </div>

        <div class="message-wrapper">
            <div class="container">
               <div class="heading">
                   <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
                   <h3>Let's learn to code, learn to be creative</h3>
               </div> 
               <a class="btn message" href="#">さっそく開発する</a>
            </div>
        </div>
        

        
    </body>
</html>
```
```ここに言語を入力
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}

li {
  list-style: none;
}

body {
  margin: 0;
  font-family:"Hiragino Kaku Gothic ProN ";
}

a {
  text-decoration: none;
}

.top-wrapper {
    background-image: url("https://prog-8.com/images/html/advanced/top.png");
    padding:180px 0px 100px 0px;
    color:white;
    text-align: center;
    background-size:cover;
}

.top-wrapper h1 {
  opacity:0.7;
  font-size:45px;
  letter-spacing: 5px;
}

.top-wrapper p {
  opacity: 0.7;
}

.container{
 width:1170px;
 margin:auto;
 padding:0 15px;
 letter-spacing:5px;

}

.btn-wrapper {
  margin:20px 0px;
}

.btn {
    display:inline-block;
    color:white;
    border-radius:4px;
    padding:8px 24px;
    
}

.twitter {
    background-color:#55acee;
    margin-left:10px;
}

.facebook{
    background-color:#3b5998;
}

.sign-up{
    background-color: #239b76;
}

.lesson-wrapper {
  height: 500px;
  padding-bottom: 80px;
  background-color: #f7f7f7;
  text-align: center;
}

.lesson {
  float:left;
  width:25%;
}

.lesson-icon {
  position: relative;
}

.lesson-icon p {
  position: absolute;
  top: 90px;
  width: 100%;
  color: white;
}

.heading {
  padding-top: 60px;
  padding-bottom: 30px;
  color: #5f5d60;
}

.txt-contents {
  width: 80%;
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  color: #b3aeb5;
}



.message-wrapper {
  border-bottom: 1px solid #eee;
  padding-bottom: 80px;
  text-align: center;
}

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  /* box-shadowをつけてください */
  box-shadow: 0 7px #1a7940;
  cursor: pointer;

}

.message :active {
  box-shadow: none;
  position: relative;
  top:7px;
}
```
### 模写しているコード

```ここに言語を入力
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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="sevice">
      <div class="container sevice">
        
        <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>

    
</body>
</html>
```
 ```ここに言語を入力
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;
}



.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;
}

.service {
    width: 10px;
    height: 10px;
    
}

.item {
    color: white;
}

.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;
    flex-grow: 1;
    flex-basis: 100vw;
    min-height: 540px;
    line-height: 1.6;
}
```

質問編集履歴