рамка страницы портится

Question

Я хотел бы создать рамку вокруг сайта. Это будет перекрывать элементы.

целевой вид

Я создал div, который стилизовал, но рамка содержит ошибку и выглядит следующим образом

фактический вид

Это мой код React

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;

Это мой css код

**.frame {
  width: 100vw;
  height: 68vh;
  border-left: 1px green solid;
  border-right: 1px green solid;
  border-top: 1px green solid;
  border-bottom: 1px green solid;
  position: absolute;
  z-index: 200;
}**

.container {
  position: relative;
  min-width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-gap: 1px;
  padding: 1px;
  height: 100vh;
}

Понятия не имею, почему он не работает

Answer 1

.frame имеет фиксированный height:

height: 68vh;

Просто удалите эту строку из вашего .frame css