title: Viewport doesn't work
body: <p>I'm practicing in using @media queries. Here is a part of my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;script src="js/script.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
      &lt;link rel="stylesheet" href="img/sprite.svg" type="image/svg+xml"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header class="page-header"&gt;
          &lt;div class="page-header__logo-wrap"&gt;
              &lt;a href="/" class="page-header__logo-link"&gt;
               &lt;svg class="page_header__tablet-logo" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 147 40" width="147" height="40" id="logotype-white-tablet" y="1948"&gt;&lt;image id="logotype-white-tablet-logotype-white-tablet.svg" width="147" xlink:href="data:img/png;base64,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" height="40"/&gt;&lt;/svg&gt;
              &lt;/a&gt;
              &lt;a href="/" class="page-header__logo-link"&gt;
              &lt;img src="img/logo_mobile.png" id="mobile-logo"&gt;
              &lt;/a&gt;
              &lt;a href="" class="main-nav__toggle"&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="page-header__nav-wrap"&gt;
              &lt;nav class="main-nav"&gt;
                  &lt;ul class="main-nav__list"&gt;
                      &lt;li class="main-nav__items main-nav__item--active"&gt;&lt;a href="#"&gt;Главная&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="main-nav__items"&gt;&lt;a href="#"&gt;Фотографии&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="main-nav__items"&gt;&lt;a href="#"&gt;Конкурс&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="main-nav__items"&gt;&lt;a href="#"&gt;Блог&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;a href="#" class="main-nav__toggle main-nav__toggle--close"&gt;&lt;/a&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
       &lt;/header&gt;
  </code></pre>
  
  <p>And here is a part of CSS:</p>
  
  <pre><code>.main-nav,
  .promo-download__button,
  .price-table__headers,
  .phone__text,
  .mail-text,
  .map-block__text {
    font-family: "Open Sans";
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  body {
    min-width: 700px;
    font-family: "Open Sans";
    background-image: url("../img/background.jpg.jpg");
    background-repeat: no-repeat;
    margin: 0;
  }
  .page-header {
    position: relative;
    width: 100%;
    height: 114px;
    display: flex;
    justify-content: space-between;
    background-color: rgba(30, 39, 50, 0.63);
  }
  .page-header #mobile-logo {
    display: none;
  }
  .page-header__nav-wrap {
    position: relative;
  }
  .page-header img {
    margin-left: 40px;
    margin-top: 34px;
  }
  #logotype-white-tablet {
    transform: translateX(39px) translateY(32px);
  }
  .page-header::after {
    content: "";
    background-repeat: no-repeat;
    background-image: url('icons/icons.svg');
    background-position: 0 -2001px;
    width: 59px;
    height: 24px;
    margin-top: 46px;
    margin-right: 40px;
  }
  .main-nav {
    display: flex;
    display: none;
    position: absolute;
    top: 114px;
    left: -431px;
    width: 100%;
    height: 255px;
    background-color: #283645;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18px;
    line-height: 32px;
  }
  .main-nav__items {
    list-style-type: none;
    flex-grow: 1;
  }
  .main-nav__items a {
    color: #ffffff;
    text-decoration: none;
    display: block;
    margin-top: 14px;
  }
  .main-nav__items::before {
    background-color: #283645;
  }
  .main-nav__toggle--close {
    position: absolute;
    top: 0;
    font-size: 0;
    border: 0;
    cursor: pointer;
    width: 22px;
    height: 22px;
    top: -66px;
    left: 637px;
  }
  .main-nav__toggle {
    position: absolute;
    font-size: 0;
    border: 0;
    cursor: pointer;
    width: 47px;
    height: 31px;
    display: block;
    left: 601px;
    top: 43px;
  }
  .main-nav__toggle--close::before,
  .main-nav__toggle--close::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 5px;
    background-color: #ffffff;
    border-radius: 1px;
  }
  .main-nav__toggle::before {
    transform: rotate(226deg);
  }
  .main-nav__toggle::after {
    transform: rotate(136deg);
  }
  .main-nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space--around;
    background-color: #1e2732;
    margin: 0 auto;
    width: 100%;
  }
  .main-nav__list li {
    flex-grow: 1;
    flex-shrink: 1;
    margin-top: 2px;
    background-color: #283645;
    text-align: center;
    width: 107%;
    box-shadow: 0 0 2px #050505;
  }
  
  
    @media only screen and (max-width: 320px) {
    html,
    body {
      margin: 0;
      padding: 0;
    }
    body {
      background-image: url("../img/background-mobile.jpg");
    }
    .page-header {
      width: 100%;
      height: 66px;
      position: relative;
      z-index: 2;
      box-sizing: border-box;
    }
    #mobile-logo {
      display: block !important;
      position: absolute;
      top: -9px;
      left: -15px;
      z-index: 1;
    }
    #logotype-white-tablet {
      display: none;
    }
    .promo-download__title {
      display: none;
    }
    .os-nav {
      display: none;
    }
    .os-nav__title {
      display: none;
    }
  }
  </code></pre>
  
  <p>When I resize window to 320px (or using chrome toggle-device mode and set it to iphone) @media query works but it seems that viewport doesn't.  I still can see horizontal scrollbar and parts of "big" header for 700px width. I have already read and tried most of decisions such as:</p>
  
  <ol>
  <li><p>Adding meta tags (one by one) like in this question and others relative to this problem: <a href="https://stackoverflow.com/questions/33287965/my-meta-viewport-doesnt-work">My meta viewport doesn&#39;t work</a></p></li>
  <li><p>Adding the specific width:</p></li>
  </ol>
  
  <blockquote>
    <p><code>&lt;meta name="viewport" content="width=320px, initial-scale=1.0"&gt;</code></p>
  </blockquote>
  
  <p>Or maybe viewport is not the main problem and I have made something wrong in CSS grid construction? </p>