Home Make a scrollable window go to the top of a page if the centered div extents past the top of the screen

Questions

Make a scrollable window go to the top of a page if the centered div extents past the top of the screen

July 21, 2022

I am trying to center a div on my website and it now works but when the window is too small you can’t scroll all of the ways to the top of the div. Ideally, if the page’s content is larger than the window it si viewed in, it should have a scroll bar that allows scrolling all the way to the top of the aqua box.
I belive that this has to do with the styling in either the body or test classes

the webpage is viewable here:

https://htmltest.duelcraft.pages.dev/

<!--(c) 2022 DuelCraft-->
<html>

<head>
  <meta charset="utf-8">
  <title>DuelCraft</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" type="image/x-icon" href="images/icon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body background='images/background.png'>
<div class="body">
  <div class="test">
    <h1>DuelCraft</h1>
    <a href="shop.html">
      <img src="images/shop.png" alt="shop" style="width:100px;height:50px;" class="center">
    </a>
    <p class="main">DuelCraft Minecraft Server</p>
    <h2>How do I join?</h2>
    <p>Connect to play.duelcraft.games</p>
    <div align="center"><iframe src="https://discord.com/widget?id=995858337293926400&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
    <div class="email-part">
      <p>Email user@example.com for help!</p>
    </div>
  </div>
    <p class="copyright"> ©2022 DuelCraft </p>
</div>
</body>

</html>

h1 {
  text-align: center;
  font-size: 64px;
}

p {
  text-align: center;
}

h2 {
  text-align: center;
}

iframe {
  display: block;
  border-style: none;
}

html {
  height: 100%;
}

body {
  font: normal 16px verdana, arial, sans-serif;
  background-position: top;
  height: 100%;
  margin: 0;
}

.test {
  width: 500px;
  border: 2px solid black;
  padding: 50px;
  margin: auto;
  background-color: #9FE7FF;
  


}

.body{
   
    margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);



}

.email-part {
  font-weight: bold;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.copyright{
 color:white;

}
@media screen and (max-width: 600px) {
  * {
    box-sizing: border-box;
  }
  body {
    padding: 1rem;
  }
  .test,
  iframe {
    width: 100%;
  }
  h1 {
    font-size: 12vw;
  }
}

text