Why can't I use @media only screen?

Question

css

When I insert @media only screen into the site code and set values ​​for blocks, nothing changes, what's the problem?

@media only screen and (max-width: 939px) {
  .wrap {
    width: 300px;
  }

  .regist {	width: 300px;}
}

<header class="header">
    <div class="top"><!--top-->
      <div class="wrap">
        <div class="logo">
          <a href="/"></a>
        </div>
        <div class="head-menu">
          <ul>
            <li><a href="login/this_avto.php">Войти</a></li>
            <li><a href="login/register.php">Регистрация</a></li>
            <li><a class="two" href="#2">Как это работает?</a></li>
            <li><a class="two" href="#3">Часто задаваемые вопросы</a></li>
            <div class="clear"></div>
          </ul>
        </div>
        <div class="clear"></div>
      </div>
    </div><!--top-->
    <div class="wrap">
      <h1>Скачивай приложения</h1>
      <h1>и получай за это деньги</h1>
      <div class="regist"><!--regist-->
        <div class="text-bl">
        </div>
        <div class="include">
          
        </div>
      </div><!--regist-->
    </div>
  </header>

Answer 1

<meta name="viewport" content="width=device-width; initial-scale=1.0">

used?

Answer 2

An article from Habr about adaptive design will be useful habrahabr.ru/post/119127
If you decide to cancel the rescaling, then here:
And an article about viewport frontender.com.ua/mobile-web/wtf-viewport

Answer 3

Here are the screenshots:
This is how the site is displayed
Mobile version:
I want the site to simply shrink in the mobile version, as in the article on the link you sent me. But it doesn't happen