html - 正しいメディア クエリを割り当てるにはヘルプが必要

Question

私が取り組んでいるレスポンシブ Bootstrap の 1 ページ テンプレートに適切なメディア クエリを適用するのを手伝ってくれませんか。トグル メニュー ボタンを最大 980px ではなく 240px から 640px の幅で表示できましたが、メイン ナビゲーション メニューを 640px から 980px で表示できませんでした。980px以降は正常に表示されます。

トグル メニュー ボタン用に作成したメディア クエリは次のとおりです。

@media (min-width: 639px) { 
.btn-navbar {
display: none;
}
}

そして、ヘッダー セクション全体の html は次のとおりです。

<!-- header -->
<div class="masthead">
  <div class="stripes"></div>
  <div class="container"> 
    <!-- button for small devices-->
    <div class="row no-margin">
      <div class="span12">
        <div class="hidden-desktop"> <a class="btn btn-navbar"  data-toggle="collapse" data-target=".nav-collapse"><span class="icon-align-justify"></span></a></div>
        <div class="brand"> <a href="#intro"><img src="img/logo.png" alt="" /></a></div>
        <!-- navigation -->
        <div class="navbar main-nav">
          <div class="nav-collapse collapse" >
            <ul class="nav pull-right ">
              <li><a href="#intro">Home</a></li>
              <li><a href="#work">Intro</a></li>
              <li><a href="#services">Amulets</a></li>
              <li><a href="#blog">Gallery</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- end navigation --> 
  </div>
  <!-- end container --> 
</div>
<!-- end header-->

考えられることはすべて試しましたが、うまくいきません。どんな助けでも大歓迎です。