メディアクエリがローカルでは適応されているのにサーバーに上げると適応されません。

前提・実現したいこと

こんにちは。
HTMLとCSSを勉強して約2週間たったので1つHPのトップページを作成しています。

コードを入力していざサーバーにアップロードしてみたのですがメディアクエリがうまく適用されていませんでした。
PC画面、タブレット用、スマホ用とでレイアウトが変わるようにして実際ローカルではPC上で画面の横幅を狭めていったらちゃんと思った通りにレイアウトが変わっていったのですがサイトにアップロードして同じように画面を狭めてもレイアウトが変わってくれませんでした。(PC画面からタブレット画面のサイズになったところは変わったけどスマホのサイズには変わらなかった。)
いろいろ調べてみましたがローカルではちゃんと動いているのにアップロードしたらちゃんと動かない原因がわかりませんでした。

どなたかご教授お願い致します。

htmlコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>GZスキルアップの部屋</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">



  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-logo">
          <img src="http://grazist-group.com/wp_grazist/wp-content/themes/grazist/images/common/logo_s.png" alt="" class="logo">
        </div>
        <div class="header-list">
            <a href="#" class="list-a1">ロープレ動画</a>
            <a href="#" class="list-a2">マニュアル</a>
            <a href="#" class="list-a3">営業ツール</a>
        </div>

      </div>
    </header>

    <div class="top-wrapper">
      <div class="container">
        <h1>LEARN TO SALES.<br>
        TO BECOME A TOP SALESMAN.</h1>
        <p>ここでは基本的な知識を学ぶことができます。<br>
        しっかり吸収してトップ営業マンを目指しましょう。</p>
      </div>
    </div>

    <div class="contents-wrapper">
      <div class="container">
        <div class="heading">
          <h2>contents</h2>
        </div>
          <div class="contents">
            <div class="lesson">
              <div class="lesson-icon">
                  <a href="#" class="btn youtube"><i class="fab fa-youtube"></i></a>
              </div>
              <p class="text-contents">ロープレ動画</p>
            </div>
            <div class="lesson">
              <div class="lesson-icon">
                <a href="#" class="btn book-open"><i class="fas fa-book-open"></i></a>
              </div>
              <p class="text-contents">業務マニュアル</p>
            </div>
            <div class="lesson">
              <div class="lesson-icon">
                <a href="#" class="btn pencil-alt"><i class="fas fa-pencil-alt"></i></a>
              </div>
              <p class="text-contents">営業ツール</p>
            </div>
             <div class="clear"></div>
          </div>
      </div>
    </div>

    <div class="top-wrapper-logo">
      <div class="container">
        <img src="https://i.gyazo.com/b819ca1048b0256650419ef792ef5813.png" alt="">
      </div>
    </div>

    <footer>
      <div class="container">
        <div class="footer-logo">
          <img src="data:image/jpeg;base64" alt="" >
        </div>
          <div class="footer-address">
            <h4>株式会社グラジスト</h4>
            <p>〒462-0844 愛知県名古屋市北区清水5-5-3名北フロント3階<br>
              TEL：052-910-3888 FAX：052-910-3889</p>
              <p>HP: <a href="http://grazist-group.com/">http://grazist-group.com/</a></p>
          </div>

      </div>
    </footer>

  </body>
</html>

stylesheet.css

*{
  margin:0px;
  padding:0px;
}

.container{
  width:100%;
  margin:0 auto;
}
a{
  text-decoration: none;
}

header{
  height:65px;
  width: 100%;
  position: fixed;
  top:0px;
  z-index: 10;
  background-color: rgba( 34, 110, 52, 0.7);
}
.header-logo{
  float:left;
  margin-left: 10px;
}
.logo{
  width: 180px;
  margin-top: 5px;
}
.header-list{
  float: right;
  height: 65px;
}

.header-list a{
  font-weight: bold;
  line-height: 65px;
  color:white;
  padding: 0 10px;
  margin: 0 5px;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.3);
}
.header-list a:hover{
  background-color: rgba(255, 255, 255, 0.5);
}


.top-wrapper {
  padding: 180px 0 180px 0;
  background-image: url(https://images.unsplash.com/photo-1462206092226-f46025ffe607?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=753&q=80);
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.4);
  background-blend-mode: lighten;
  text-align: center;
}
.top-wrapper h1{
  font-size: 58px;
  letter-spacing: 5px;
  opacity: 0.7
}
.top-wrapper p{
  font-size: 25px;
  opacity: 0.9
}

.contents-wrapper{
  text-align: center;
  background-color: #f7f7f7;
  padding: 80px 0;
}
.lesson{
  float: left;
  width:33.3%;
}
.heading{
  margin-bottom: 50px;
  font-size: 25px;
}
.heading h2{
  font-weight: normal;
  opacity: 0.7;
}
.btn{
  font-size:100px;
  opacity: 0.7;
}
.btn:hover{
  opacity: 1;
}
.youtube{
  color:red;
}
.book-open{
  color:blue;
}
.pencil-alt{
  color:green;
}
.text-contents{
  font-size: 13px;
  width: 80%;
  display: inline-block;
  color: #b3aeb5;
}

.top-wrapper-logo {
  text-align: center;
  margin-top: 20px;
}

footer{
  margin-top: 10px;
  padding-top: 5px;
  border-top: 1px solid #eee;
}
.footer-logo{
  float: left;
}
.footer-logo img{
  width:100px;
  margin-left: 10px;
}
.footer-address {
  float: right;
  margin-top: 20px;
  margin-right: 100px;
  margin-bottom: 30px;
}

.clear{
  clear: left;
}

responsive.css

@media screen and (max-width:1000px) {
.header-list a{
  font-size: 11px;
}
.top-wrapper{
padding: 180px 0 100px 0;
}
.top-wrapper h1{
  font-size: 30px;
}
.top-wrapper p{
  font-size: 17px;
}
.heading{
  font-size: 20px;
}
.btn{
  font-size:80px;
}
.text-contents{
  font-size: 11px;
}
.top-wrapper-logo img{
  width:100%;
}

.footer-address {
  margin-right: 30px;
}

}


@media screen and (max-width:670px) {
  .header-list{
    display: none;
  }
  .top-wrapper h1{
    font-size:20px;
  }
  .top-wrapper p{
    font-size: 15px;
    margin-top: 10px;
  }
  .lesson{
    width:100%;
  }
  .text-contents{
    margin-bottom: 50px;
  }
  .footer-logo{
    float: none;
  }
  .top-wrapper-logo img{
    width:100%;
  }
  footer{
    text-align: center;
  }


}