layering weird on website? - ☔︎ ∙ I need Help!

<!DOCTYPE html> <html> <head> <style> .navigation-section { text-align: center; display: block; } .navbar { background-color: black; display: inline-block; width: 100%; height: auto; border: 2px; border-style: transparent; position: fixed; top: 0; text-align: center; font-size: 30px; } .content-section { display: flex; width: 800px; flex-wrap: wrap; justify-content: center; margin: 0 auto; } .box { display: flex; justify-content: center; background-color: black; border: 2px red; border-style: dotted; padding: 5px; margin: 5%; position: absolute; width: 60%; } .box-section { flex: 1; margin: 1em; padding: 1px; text-align: center; color: red; overflow: hidden; overflow-y: auto; position: left; height: 30%; } .box-img { flex: 1; margin: 1em; padding: 1px; text-align: center; color: red; overflow: hidden; height: auto; } h1 { text-shadow: 5px 5px 0px red; color: white; } .divider { display: flex; position: center; } .np { color=white; } </style> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MACHINE GIRL</title> <link href="mchngrl.css" rel="stylesheet" type="text/css" media="all"> </head> <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> <div class="content-section"> <h1>oh... my ass is big...</h1> <div class="divider"> <img src="https://pixelsafari.neocities.org/dividers/more/chain2.gif" width=100% height=50%> </div>  <div class="box"> <div class="box-img"> <sub><a href="https://machinegirl.bandcamp.com/">BANDCAMP</a> <a href="https://www.instagram.com/machin3gir1/?hl=en">INSTAGRAM</a> <a href="https://www.youtube.com/@Machin3gir1">YOUTUBE</a></sub> <img src="https://f4.bcbits.com/img/a2086453290_10.jpg" width=100%> <sub>MOST RECENT RELEASE: <a href="https://machinegirl.bandcamp.com/album/psychowarrior-mg-ultra-x">PSYCHOWARRIOR: MG ULTRA X</a></sub> </div> <div class="box-section"> <p><b>MACHINE GIRL</b> (also known as machin3g1rl or MCHNGRL) is an electronic music project created by <a href="https://www.instagram.com/popular/matt-stephenson/">Matt Stephenson</a> and based in <b>Long Island, NY</b>. In 2015, Sean Kelly was recruited to play live drums and the project became a duo. Lucy Caputi also joined in 2024 to play live guitar.</p> <h5>WHAT IS MACHINE GIRL?</h5> <p>Machine Girl's sound can be described as many things-- people opt to describe it as electronic, digital hardcore, breakcore, jungle, or gabber. Their music is wide-reaching enough that I think it could be described as any of these things, but I think their music is so distinct that it's simply Machine Girl.</p> <h5>ATTENDED CONCERTS</h5> <li> <ul>Oct 30, 2025 - MCHNGRL at Knockdown Center, Queens</ul> <ul> Apr 26, 2023 - MCHNGRL at Franklin Music Hall, Philadelphia </ul> </li> </div> </div> <div class="divider"> <img src="https://pixelsafari.neocities.org/dividers/more/chain2.gif" width=100% height=50%> </div>  </div> <audio src="https://files.catbox.moe/aqc0vl.mp3" loop autoplay> </body> </html>

I try to mean the nicest way possible, I think you need to let go of the display:flex and look into display:grid to help with your layout. I guess float:auto (left/right) works as well but it may require you to change the postition attributes. Resources: W3Schools and CSS Tricks

Also, I looked at your code and your spaces are flagged as invisible unicode so I removed it. Pressing tab or space works just fine so I hope there really aren't invisible unicodes in your code. The code have the CSS grid already in it and it is not complete. Height and width adjustment is needed!!

Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>MACHINE GIRL</title>
        <link href="/mchngrl.css" rel="stylesheet" type="text/css" media="all">
<style>
.container {
    display: grid;
    position: relative;
    grid-template:
    "navbar box content-section"/1fr 2fr 1fr;
}
.navigation-section {
    text-align: center;
    display: block;
}
.navbar {
    background-color: black;
    display: inline-block;
    width: 100%;
    height: auto;
    border: 2px;
    border-style: transparent;
    top: 0;
    text-align: center;
    font-size: 30px;
}
.content-section {
    width: auto;
    flex-wrap: wrap; 
    justify-content: center; 
    margin: 0 auto;
}
.box {
    display: flex;
    justify-content: center;
    background-color: black;
    border: 2px red;
    border-style: dotted;
    padding: 5px;
    margin: 5%;
    width: 60%;
}
.box-section {
    display: block;
    flex: 1;
    margin: 1em;
    padding: 1px;
    text-align: center;
    color: red;
    overflow: hidden;
    overflow-y: auto;
    height: 30%;
}
.box-img {
    flex: 1;
    margin: 1em;
    padding: 1px;
    text-align: center;
    color: red;
    overflow: hidden;
    width: 500px;
}
h1 {
    text-shadow: 5px 5px 0px red;
    color: white;
}
.np {
    color: white;
}
</style>
    </head>
<body>

<div class="container">
<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>

<div class="box">
    <div class="box-img">
        <sub><a href="https://machinegirl.bandcamp.com/">BANDCAMP</a> <a href="https://www.instagram.com/machin3gir1/?hl=en">INSTAGRAM</a> <a href="https://www.youtube.com/@Machin3gir1">YOUTUBE</a></sub>
        <img src="https://f4.bcbits.com/img/a2086453290_10.jpg" style="width:100%;;">
        <sub>MOST RECENT RELEASE: <a href="https://machinegirl.bandcamp.com/album/psychowarrior-mg-ultra-x">PSYCHOWARRIOR: MG ULTRA X</a></sub>
    </div>
    <div class="box-section">
        <p><b>MACHINE GIRL</b> (also known as machin3g1rl or MCHNGRL) is an electronic music project created by <a href="https://www.instagram.com/popular/matt-stephenson/">Matt Stephenson</a> and based in <b>Long Island, NY</b>. In 2015, Sean Kelly was recruited to play live drums and the project became a duo. Lucy Caputi also joined in 2024 to play live guitar.</p>
        <h5>WHAT IS MACHINE GIRL?</h5>
        <p>Machine Girl's sound can be described as many things-- people opt to describe it as electronic, digital hardcore, breakcore, jungle, or gabber. Their music is wide-reaching enough that I think it could be described as any of these things, but I think their music is so distinct that it's simply Machine Girl.</p>
        <li>ATTENDED CONCERTS
            <ul>Oct 30, 2025 - MCHNGRL at Knockdown Center, Queens</ul>
            <ul> Apr 26, 2023 - MCHNGRL at Franklin Music Hall, Philadelphia </ul>
        </li>
    </div>
</div>


<!-- <div class="np">
<marquee><sub>NOW PLAYING: Congratulations</sub></marquee>
</div> 
-->

<div class="content-section">
    <h1>oh... my ass is big...</h1>
        <img src="https://pixelsafari.neocities.org/dividers/more/chain2.gif" style="width:100%">
</div>
    <!-- <iframe data-testid="embed-iframe" style="border-radius:12px" src="https://open.spotify.com/embed/album/1GezMTE4OA4tikMDBQK5u3?utm_source=generator&theme=0" width="50%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe> -->

</div> <!-- end container -->

<audio src="https://files.catbox.moe/aqc0vl.mp3" loop autoplay>
</body>
</html>