内容越过我的标题，但不是页脚？

Question

由于某种原因，我在.box中的内容超出了我的标题，但是当你调整窗口大小时，我的内容不是我的页脚。我试图使页脚/标题固定，因此当调整窗口大小时，它们不会移动并且内容会覆盖它们。但就像我说它只适用于页脚，标题允许内容覆盖它。所以我想知道我该怎么做才能解决这个问题？谢谢。

body {
  background-color: #323232;
  font-family: Lato;
  padding: 0;
  margin: 0;
}

nav a {
  color: #fff;
  text-decoration: none;
  padding: 7px 25px;
  display: inline-block;
}

.container {
  width: 100%;
  margin: 0 auto;
}

.fixed-header, .fixed-footer {
  width: 100%;
  position: fixed;
  background: #333;
  padding: 10px 0;
  color: #fff;
  text-align: center;
}

.fixed-header{
  top: 0;
}

.fixed-footer{
  bottom: 0;
}

.box {
  background: #FFFFFF;
  padding: 10px;
  width: 400px;
  height: 600px;
  text-align: center;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>

<html lang="en">

 <head>
  <title>Kumo99.cf</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="icon" href="favicon.ico">
 </head>

 <body>

<div class="fixed-header">
  <div class="container">
   <nav>
     <a href="index.html">HOME</a>
     <a href="projects.html">PROJECTS</a>
     <a href="about.html">ABOUT</a>
   </nav>
 </div>
</div>

  <div class="box">
  <div class="container">
   <img src="images/avatar.png" alt="" class="box-avatar">
   <h1>KUMO</h1>
   <h5>RANDOM DEVELOPER</h5>
   <ul>
     <li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
   </ul>
  </div>
  </div>

  <div class="fixed-footer">
    <div class="container"><a href="https://steamcommunity.com/id/kumo99">Made by Kumo © 2017</a></div>
  </div>

 </body>
</html>

Answer 1

另一答案