レスポンシブ対応PCサイズでCSSが反映されない

前提・実現したいこと

初心者です。簡易なWebサイト作成しております。
レスポンシブ対応でcssで
@media screen and (max-width: 768px)にてスマホ用コードを記載しております。

すると、PCサイズにした時、メインビジュアルが消える、他cssが反映されない、jQueryなども反映されず、です。
スマホサイズではcssなど反映されます。

以下のソースコードは例にメインビジュアルを記載します。
最近css勉強中の身にて初歩的なところで躓いているかと思いますが、どうにかレスポンシブ対応完成させたいです。
ご助言よろしくお願いします。

発生している問題・エラーメッセージ

該当のソースコード

html:viewport設定済み
<meta name="viewport" content="width=device-width,initial-scale=1">

例：メインビジュアル（html）
<section id="mainvisual">

      <div class="copy-wrap">
        <p class="subcopy">
          サブコピー
        </p>
        <p class="maincopy">
          メインコピー
        </p>
        <a class="button-large" href="#">ボタン</a>
      </div>
    </section>

（css）
  #mainvisual {
	background-color: #333333;
	height: 500px;
	width: 100vw;
	height: calc(100vh - 70px);
	background-image: url("../images/mainvisualpc.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	margin-top: 70px;
	margin-bottom: 30px;
}

.copy-wrap {
  position: absolute;
  left: 120px;
  bottom: 120px;
}

p.subcopy{
	font-weight: bold;
	font-size: 40px;
	letter-spacing: -0.06em;
	margin-bottom: 10px;
	color: #fff;
	text-shadow: 5px 5px 9px #8f5543,-5px -5px 9px #8f5543;
}

p.maincopy{
	font-family: 'Cabin', sans-serif;
	font-weight: bold;
	font-size: 52px;
	letter-spacing: 0.06em;
	margin-bottom: 20px;
	color: #fff;
	text-shadow: 5px 5px 9px #8f5543,-5px -5px 9px #8f5543;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #mainvisual {
    width: 100vw;
    height: 100vw;
    background-image: url("../images/mainvisualsp.png");
    margin-top: 60px;
    margin-bottom: 30px;
    position: relative;
  }

  p.maincopy {
    font-size: 28px;
    line-height: 1.6;
    letter-spacing: 0.15em;
    text-align: center;
  }

  p.subcopy {
    font-size: 18px;
    margin-bottom: 6px;
    text-align: center;
  }

  .copy-wrap {
    left: 60px;
    bottom:-20px;
  }

  #mainvisual .button-large {
   margin: 0 auto;
  }
}