Css 页面未缩放以适应移动设备上的视口，可以'；不能缩小

我不明白为什么我的页面不适合移动视图中的视口。您可以滚动页面，但不能缩小以适应整个页面

我的头上有

（这只是为了清楚起见；CodePen会自动添加它）

My media query for mobile使用CSS网格将页面从两列布局更改为一列布局。以下是完整的移动媒体查询：

@media screen and (max-width: 767px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 40rem auto auto 50rem auto auto auto 42rem auto auto;

    grid-template-areas:
      "header"
      "image"
      "intro"
      "pricing"
      "portrait"
      "about"
      "banner"
      "contact"
      "banner2"
      "video"
      "footer";
  }

  header {
    justify-content: center;
  }

  nav ul {
    display: none;
  }

  .logo {
    height: 3.5rem;
    padding: 0.1rem 1.9rem 0 0;
  }

  .intro-text {
    padding: 2rem 4rem 2rem 4rem;
  }

  .pricing-levels {
    flex-direction: column;
  }

  .pricing-levels:last-child {
    margin-bottom: 4rem;
  }

  .pricing-level {
    margin: 1.5rem auto;
    padding: 3rem;
    width: 75%;
  }

  .pricing-level:first-child {
    margin-top: 0;
  }

  .about-text {
    margin-bottom: 3rem;
  }

  .banner {
    /* Mobile-only image; better fit */
    background-image: url(https://github.com/nataliecardot/landing-page/blob/master/img/couple-heart.jpg?raw=true);
    background-position: center;
  }

  .banner-text {
    font-size: 3rem;
    margin: 15rem 0;
  }

  form {
    text-align: center;
  }

  .form-left {
    width: 85%;
    padding-right: 0;
    text-align: left;
    font-weight: bold;
  }

  .form-right {
    width: 85%;
    margin-top: 1.2rem;
  }

  .form-item {
    margin: 1rem 0;
  }
}

我尝试在正文和html中添加

max width:100%

，但没有任何效果。另外，我有一个with（主要区别是带有iframe的行），它没有发生这种情况。我将这些文件与diffs工具进行了比较，没有发现任何可以解释问题的差异

我检查过类似的问题，但没有有用的答案

---

此外，我的其他媒体查询的平板电脑不会出现此问题。

一个问题是您的视频iframe。它没有反应

iframe#视频{
最大宽度：100%；
}

编辑：

垂直滚动条的第二个原因是标题。标题的内容对于移动视图来说太宽了

我在标题中添加了一个

overview:hidden

来演示它

=>