Elements overlapping and moving when resizing browser

I’m currently working on making my webpage more adaptable to different screen sizes. At full screen, the elements align properly but when I start to make the browser screen smaller, the image starts to move downwards and the header doesn’t resize at all.
ezgif.com-gif-maker (1) (1)
I would like all of the elements to stay in the same layout when resizing but I’m having trouble making this happen. Would greatly appreciate any advice on how to make this work.

HTML

<!DOCTYPE html>
<html>

    <head>
        <script src="https://kit.fontawesome.com/401ce5b762.js" crossorigin="anonymous"></script>
        <title>"Parallax Astro Girl"</title>
        <link rel="stylesheet" type="text/css" href="./styles.css"/>
        <meta name="author" content="Ayanfe Sanusi">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    </head>
    <body>
       <nav class="navbar">
    
        <header>
            <a href="#" class="logo">[Ayanfe]:)</a>
            <ul>
                <li><a href="./6/index.html" class="active">Next</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        </nav>


        <div class="content-wrapper">
            <div class="image-container">
                <canvas class="canvas" width="2198" height="2993" id="canvas">
                   
                </canvas>
                 <div class="loading-screen" id="loading">Loading...</div>
            </div>
        
              <div class="section-content">
            <div class="text">
                <h1>Example #1</h1>
            </div> 
            <div class="move">Grab and Move Picture (Parallax Animation)</div>

        <div class="paragraph">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas pharetra libero, at placerat ligula pretium quis. Vestibulum semper sapien et odio rutrum mattis. Morbi convallis nec sem in dictum. Morbi diam ipsum, posuere id placerat in, sagittis non quam. Maecenas vehicula pulvinar semper. Nullam nibh magna, ultrices vitae nibh vel, ultrices placerat dolor. Donec maximus bibendum dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas molestie lacinia libero vel malesuada. Etiam vitae sagittis turpis. Integer in est fringilla, varius risus ac, luctus quam. Pellentesque vitae molestie metus. Aliquam ut quam dapibus, dictum enim non, convallis leo. Donec libero ipsum, feugiat aliquam dui vitae, imperdiet rhoncus nunc. Integer a libero ultrices, interdum leo a, rutrum nulla.
            <br>
            <br>

            Donec faucibus, ligula ut facilisis malesuada, est turpis sodales ante, eu sollicitudin ante nunc ullamcorper nulla. Nunc ut ligula id arcu aliquet tristique at tristique dolor. Etiam ut efficitur odio, sagittis rhoncus risus. Suspendisse potenti. Aliquam sed risus ac metus consequat ullamcorper in condimentum nisl. Aliquam non justo pulvinar, sodales arcu vel, commodo eros. Morbi nunc odio, ullamcorper vitae ornare non, laoreet eget risus.
            <br>
            <br>
            Nullam ut urna convallis, tempor nunc sed, commodo risus. Donec malesuada ex congue ultrices porttitor. Pellentesque condimentum dapibus arcu sit amet consectetur. Nullam id lorem efficitur, molestie dui id, mollis metus. Aenean cursus velit eget nisi fermentum vehicula. Vestibulum vitae cursus metus, nec consequat arcu. Sed imperdiet aliquam blandit. Phasellus hendrerit sollicitudin mauris, ut euismod massa tristique nec. Donec finibus ipsum id risus finibus, sed convallis nunc placerat.
            </p>


        </div>
    </div>
        </div>
        
  
         
        
    
    
    </body>
    <script type="text/javascript" src="./tween.js"></script>
    <script type="text/javascript" src="./main.js"></script>

    <style type="text/css">

    </style>
</html>

CSS

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

html,
body {
    box-sizing: border-box;
    margin: 0;
    background-color: black;
    font-family: sans-serif;
}

main {
    margin-left: 9rem;
    padding: 1rem;
}


.text h1 {
    padding: 1.25rem;
    color: white;
    font-size: 4em;
    position: relative;
    white-space: nowrap;
    top: 2rem;

}

.move {
    padding: 1.25rem;
    color: white;
    font-size: 0.813rem;
    font-style: italic;
    position:relative;
}

.paragraph {
    color: white;
    font-size: 0.938rem;
    position: relative;
    vertical-align: middle;
    text-align: center;
    top: 2rem;

}

.image-container {
    display: inline-block;
    height: 40%;
    width: 40%;
    min-width: 40%;
    min-height: 40%;
    max-width: 50%;
    position: relative;
    top: 4rem;
    left: -1rem;
}

.canvas {
    width: auto;
    max-height: 100%;
    max-width: 100%;
    display: block;
    margin: auto;
}
.loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background:  black;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: visible;
    opacity: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 2.5rem;
    transition: 0.25s ease all 0.75s;
    color: #999;
    transform: translateZ(50rem);
}
.loading-screen.hidden {
    visibility: hidden;
    opacity: 0;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.875rem 6.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Poppins, sans-serif;
    z-index: 10000;
}

header .logo {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.563rem;
    text-transform: uppercase;
    letter-spacing: 0.313rem;

}

header ul{
    display: flex;
    justify-content: center;
    align-items: center;

}

header ul li {
    list-style: none;
    margin-left: 1.25rem;
}

header ul li a {
     text-decoration: none;
     padding: 0.375rem 0.938rem;
     color: #fff;
     border-radius: 1.25rem;

}

header ul li a:hover,
header ul li a.active {
    background: #fff;
    color: #2b1055;
}


.content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 93.75rem;
    margin: 0 auto;
    padding: 0 3.125rem;
}


.content-wrapper .section-content {
    width: 50%;
    display: inline-block;
    padding-left: 6.25rem;
    text-align: center;
}

.image-container img {
    max-height: 37.5rem;
    
}

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px)
@media (min-width: 641px)
}