内容从 div 容器中出来，不知道该怎么做

Question

在网络编程方面仍然很新，我似乎无法弄清楚为什么我的内容总是从我的 div 中出来。当我放大按钮并且 headers 流出它的容器时在这里你可以在 codepen 上看到我的代码：

https://codepen.io/roger-matadeen/pen/PozWVVE
这是我的 html

/* Removes All Margin and Padding from elements  */

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration:underline;
}

.navbar {
  display: grid;
  min-height: 100px;
  grid-auto-flow: column;
  grid-gap: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.logo {
  display: grid;
  justify-content: center;
  align-content: center;
}

.links {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-content: center;
  grid-gap: 20px;
  font-size: 20px;
}

.header{
  background-image: url("https://cdn.pixabay.com/photo/2016/04/30/20/41/banner-1363794_960_720.jpg");
  display: flex;
  border: 1px solid black;
  width: 100vh;
  flex-direction: row;
  margin: auto;
  background-repeat: no-repeat;
  justify-content: center;
  align-content: center;
  padding: 40px;
  color: white;
}

.hero {
display: flex;
  flex-direction: column;
  height: 70vh;
  width: 80vh;
  background-image: url("https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/rm233-eye-02.jpg?w=1300&dpr=1&fit=default&crop=default&q=80&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=b625852b7057993e0983ec35ceb8e4b3");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: auto;
  align-items: center;
  color: white;
  padding-top:20px;
  justify-content: center;
  flex-flow: row wrap;
}

.hero-title {
  align-items: center;
  text-align: center;
  font-size: 30px;
}

button {
  background-color: black;
  color: white;
  border-radius: 2px;
  padding: 10px;
  margin-top: 25px;
  justify-content: center;
}

button:hover {
  color: red;
}

/* margin property auto: horizontally center the element within its container. */

<div class="navbar">
  <div class="logo"><h1>LOGO</h1></div>
    <div class="links">
      <a href="">Home</a>
      <a href="">About</a>
      <a href="">Contact</a>
      <a href="">Account</a>
      <a href="">Product</a>
    </div>
</div>
<section class="hero">
  <header class="hero-title">
    <h1>FIND THE PRODUCTS OF YOUR DREAMS!</h1>
    <h1>Happiness guranteed!</h1>
    <button>
      <h1>Shop Now!</h1>
    </button>
  </header>
</section>

谁能指导我正确的方向:)

Answer 1

首先，您只需将 <body> in codepen HTML 部分中的内容插入即可。

出现您的问题是因为您将 height: 70vh 设置为 .hero。
所以无论 .hero 中的内容相对于视口高度 (vh) 有多大，.hero 始终是其高度的 70%。

要解决此问题，您可能需要设置 height: auto 例如。

内容从 div 容器中出来，不知道该怎么做

Content is coming out of div container not sure what to do

html

css

grid

flexbox