Html 页面框架正在损坏

我想围绕网站创建一个框架。它将重叠元素

我创建了一个div，我对它进行了样式化，但是框架是bug，看起来像这样

这是我的代码

class About extends Component {
  render() {
    return (
      <div className="frame">
        <div className="container">
          <div className="grid">
            <div className="grid-item grid-item-1">{<Toggle />}</div>
            <div className="grid-item grid-item-2">{<Text />}</div>
            <div className="grid-item experience">{<StatsExp />}</div>
            <div className="grid-item clients">{<StatsClients />}</div>
            <div className="grid-item articles">{<StatsArticles />}</div>
            <div className="grid-item words">{<StatsWordsCV />}</div>
            <div className="grid-item grid-item-3">
              {<Picture />}
              {<Social />}
            </div>
            <div className="grid-item grid-item-5">{<Navigation />}</div>
            <div className="grid-item grid-item-6">{<Butt />}</div>
          </div>
        </div>
      </div>
    );
  }
}

export default About;

---

我不知道它为什么不工作。框架有一个固定的高度：

height: 68vh;

---

只要从

.frame

css

中删除这一行，现在框架就在页面周围了，因为我使用padding exp.120px将其移入，什么也没有发生

height: 68vh;