Different elements of page on top of eachother - ☔︎ ∙ I need Help!

i'm trying to get the elements on this page to stack as they would normally, but it looks like my box is covering some of it up/pushing them to the side and i'm wondering how to get it so they're top-to-bottom the normal way without messing up my box too much.

here is the code for the page--

Code

<!DOCTYPE html>
<html>
<!-- figure out how to put a sidebar in here for tabs maybe-->
<!-- tabs? art blog shrines fun info i want to put trinkets on ittttt i want a neocities pet-->
<!-- make top banner for new changes i made perhaps (div) -->
<style>
.box {
  background-color: black;
  
  flex-wrap: wrap;

width: 200px

border: 2px white;

border-style: solid;

padding: 5px;
padding-top: 5px;

margin-left: 20%;

margin-right: 20%;

overflow: hidden;

position: absolute;
}
.navbar {
  background-color: black;
  display: inline-block;
  width: 100%;
  height: auto;
  border: 2px;
  border-style: transparent;
  position: fixed;
  top: 0;
  text-align: center;
}
<!-- i just might not even use this man -->
.counter {
  display: flex;
  width: auto;
  position: relative;
  bottom: 0;
  display: inline-block;
}
.content-section {
      display: flex; 

width: 70%;
      flex-wrap: wrap; 

      justify-content: center; 
      margin: 0 auto;
    }
    
audio {
  display: block;
  width: 20%;
  position: center;
}
.swatchtime {
  text-size: 50px;
  display: block;
  width: 50%;
  justify-content:center;
  margin: 0 auto;
  position: absolute;
}
</style>


    <link href="stylesheet.css" rel="stylesheet" type="text/css" media="all">
    <link rel="icon" href="swirlspin.gif" type="image/x-icon"/>
 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my website</title>
    
  <body>
  <div class="navbar">
      <a href="index.html">home</a> <a href="about.html">about</a> <a href="posts/archive.html">blog</a> <a href="shrinesindex.html">shrines</a href> <a href="http://users.smartgb.com/g/g.php?a=s&i=g19-03093-42">guestbook</a>
</div>
  <br>
     <h1><marquee
     direction="left"
     >
    welcome to my webpage!
    </marquee>
    </h1>
    <div class="content-section">
  <div class="box">
  <center>
 <img src="rainbowdivider.gif" width=100%>
 <audio src="https://files.catbox.moe/of9ed0.mp3" autoplay></audio>
  <h1><i>Mercury's corner of the web</i></h1>
  </center>
  <p>
  <img src="mayura.gif" width=40%
  align="left"
  style="margin:50px">
  </p>
  <p>hello! my name is <font color=#ff3d6e>mercury</font>! this is my corner of the web <sub><font color=#4a4a4a>which i am still building (i have to reteach myself html :( )</font></sub>. it is nice to meet you ^_^</p>
  <p><a href="coolsites.html">cool sites</a></p>
  <center><details>
  <summary>to-do list</summary>
  <ul>
  <li>create template for character pages</li>
  <li>make sitemap + planned pages</li>
  </ul>
  </center></details>
 <center><p>LAST UPDATE: 5/23/26</p></center>
 <center><script type="text/javascript" src="https://counter.websiteout.com/js/2/6/0/0"></script></center>
 </div>
 <br>
 <!-- MelonLand Guild Widget Code for Nature Camp -->
<script src="https://forum.melonland.net/guilds/ring-variables.php?g=7" defer></script>
<script src="https://forum.melonland.net/guilds/ring-widget.js?g=7" defer></script>
<link href="https://everyone.melonland.net/~nature/butterfly-ring.css" rel="stylesheet">
<!-- trans webring -->
 <script src="https://transring.neocities.org/ring.js" data-widget="cloud"></script>
 </div>
 <footer> <div class="swatchtime">
    <span id="swatchClock"></span>
<script defer src="https://melonking.net/scripts/swatchTime.js"></script>
</div>
</footer>
  </body>
</html>

<style> .child { position: absolute; border: 3px dashed blue; height: 50px; width 50px; /* this element should be put 100px from the top of its parent and 100px from the left of its parent */ top: 100px; left: 100px; } .parent { position: relative; border: 3px dashed green; height: 500px; width: 500px; } </style> <div class='parent'> <div class='child'> woohoo content </div> </div>