Page and Image Not Placed Where it Should Be

Question:
So I am making a Repl for a makerspace thing, and below my navbar I want to have a page with an image on the right side, but it isn’t working and the page is on the left.

Repl link:
https://replit.com/@AMS-TSA/WebsiteDesign

https://48c1ee5b-4647-4690-ba32-fa899fee5d56-00-2nzyr1b05hpzd.global.replit.dev/


CSS
:root {
    --fore: white;
    --gray: lightgray;
    --main: #23378B;
    --back: #131b2b;
    --back-accent: #002d3d;
    --accent: rgba(0,150,255,1);
    --shadow: rgba(0,0,0,0.3);
    --none: rgba(0,0,0,0);
    }
.navbar {
    margin-top: -100vh;
    transform: translateY(-100vh);
    background: rgba(27,35,52,0.1);
}

.home-page {
    margin: 0;
    height: 200vh;
}

.page1 {
    top: 0;
    height: 100vh;
    display: flex;
    position: relative;
    background: var(--back);
    margin: auto;
    justify-content: space-between;
}

.page1 img {
    width: 30vw;
    height: 45vh;
    right: 0;
    margin-right: 0;
    border-radius: 14px;
}

.page2 {
    padding: 10vh;
    margin-top: -108vh;
    height: 120vh;
    background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(3,1,37,1) 35%, rgba(50,48,84,1) 100%);
    box-shadow: 0px -11px 2px 7px rgba(50,48,84,1);
}

@media screen and (max-width: 480px) {
    .page1 {
        margin-top: -101vh;
    }
}

@media screen and (max-width: 240px) {
    .page1 {
        margin-top: -101vh;
    }
}

* {
    box-sizing: border-box;
}

body, html {
   overflow-x: hidden;
   margin: 0;
   padding: 0;
}

html {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    font-family: arial;
    /*background: url('/static/home-page.jpeg') no-repeat; /* image is a placeholder for now
    background-size: cover;*/
    color: var(--fore);
}

.navbar {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999999;
    width: 110vw;
    color: var(--fore);
    background: var(--accent);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    box-shadow: 0px 5px 2px 0px var(--shadow);
    border: none;
    border-radius: 15px;
    padding: 1px;
    margin: -5px;
    display: flex;
    align-items: center;
}

.navbar .logo-container {
    width: 5rem;
    height: 5rem;
}

.navbar .logo {
    background: transparent;
    width: 100%;
    height: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: calc(3em + 2rem);
    border-radius: 50%;
    box-shadow: 0 0 0 10px var(--accent), 0 15px 5px var(--shadow);
    transition: 0.1s all ease-in-out forwards;
}

.navbar .logo:hover {
    transform: scale(1.05);
}

.wrapper {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    margin: 0 auto;
    width: 50vw;
    min-height: 7.5vh;
    padding: 4px 2px;
    box-shadow: 0 0 0 10px var(--back), 0 0 0 12px var(--main), 0px 15px 25px 20px var(--shadow);
    max-width: 800px;
    background: var(--main);
}

.wrapper-title {
    margin-left: 8px;
    font-size: calc(1.5vw + (1.5rem - 8px));
}

.wrapper .input-box {
    width: 95%;
    height: 30px;
    margin-bottom: 1em;
    margin-top: 5em;
    margin-left: auto;
    margin-right: auto;
    animation-delay: 3s;
}

.input-box {
    font-size: calc(1.5vw + 0.5rem);
    position: relative;
}

.input-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 40px);
    height: calc(100% + 0.5rem);
    position: relative;
}

.input-box input {
    position: relative;
    font-size: 1em;
    color: var(--fore);
    width: 100%;
    height: 100%;
    background: transparent;
    text-indent: 10px;
    outline: none;
    padding-right: 30px;
    /*box-shadow: 0px 15px 25px 1px var(--shadow);*/
    border: none;
    border-radius: 0px;
    border-bottom: 2px solid var(--gray);
    transition: all 0.3s ease-in-out;
}

.input-wrapper svg {
    width: calc(1.5vw + 1rem);
    height: calc(1.5vw + 1rem);
    fill: var(--fore);
    position: absolute;
    right: 0px;
    top: 0;
    /*background: var(--main);
    border: 2px solid var(--fore);
    border-radius: 4px;
    padding: 2px;*/
}

@media screen and (max-width: 120px) {
    top: 15%;
}
@media screen and (max-width: 240px) {
    top: 25%;
}
@media screen and (max-width: 480px) {
    top: 35%;
}

.input-box label {
    margin-bottom: 3em;
}

.wrapper h1 {
    margin-left: 4px;
    font-size: calc(width - 5em);
}

.input-box:nth-child(2) {
    transition-delay: 200ms;
}
.input-box:nth-child(3) {
    transition-delay: 300ms;
}

.wrapper .submit {
    color: var(--fore);
    animation-delay: 5s;
    margin: auto;
    margin-top: 10em;
    margin-bottom: 3em;
    background: var(--main);
    border: 2px solid var(--accent);
    height: 3em;
    width: 10em;
    font-size: calc(width + 10em);
    text-align: center;
    border-radius: 8px;
    transform: translateY(0px);
    transition: all ease-in-out 0.15s;
}

.wrapper .submit:hover {
    transition: all ease-in-out 0.15s;
    transform: translateY(-10px);
    background: var(--accent);
}

.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  transform: translateY(0);
  opacity: 1;
}

@keyframes slideInLeft {
    from {
        filter: blur(5px);
        opacity: 0;
        transform: translateX(-300px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        filter: blur(5px);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.active.fadeIn {
  animation: ease-in-out fadeIn 0.6s forwards;
}

.active.slideInLeft {
  animation: ease-in-out slideInLeft 0.6s forwards;
} 
HTML
{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% block content %}
<div class="home-page">
    <h1>{{ title }}</h1>
</div>
   <div class="navbar">
       <div class="logo-container">
        <a href="#/templates/index.html"><img class="logo" src="/static/logo.png"></a>
<div class="page1">
    <img src="/static/home-page.jpeg">
</div>
       <!--<a href="#/templates/index.html"><i class="fa-solid fa-house"></i></a>-->
   </div>
</div>
<div class="page2">
   <form method="post" action="/submit">
       <div class="wrapper reveal slideInLeft">
           <h1 class="wrapper-title">Reservation</h1>
           <div class="input-box reveal fadeIn">
               <label for="reservation_name">Reservation Name (Full Name):</label>
               <div class="input-wrapper">
                    <input type="text" name="reservation_name" id="reservation_name" required placeholder="Name">
                    <!--<i class="fas fa-signature"></i>-->
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M192 128c0-17.7 14.3-32 32-32s32 14.3 32 32v7.8c0 27.7-2.4 55.3-7.1 82.5l-84.4 25.3c-40.6 12.2-68.4 49.6-68.4 92v71.9c0 40 32.5 72.5 72.5 72.5c26 0 50-13.9 62.9-36.5l13.9-24.3c26.8-47 46.5-97.7 58.4-150.5l94.4-28.3-12.5 37.5c-3.3 9.8-1.6 20.5 4.4 28.8s15.7 13.3 26 13.3H544c17.7 0 32-14.3 32-32s-14.3-32-32-32H460.4l18-53.9c3.8-11.3 .9-23.8-7.4-32.4s-20.7-11.8-32.2-8.4L316.4 198.1c2.4-20.7 3.6-41.4 3.6-62.3V128c0-53-43-96-96-96s-96 43-96 96v32c0 17.7 14.3 32 32 32s32-14.3 32-32V128zm-9.2 177l49-14.7c-10.4 33.8-24.5 66.4-42.1 97.2l-13.9 24.3c-1.5 2.6-4.3 4.3-7.4 4.3c-4.7 0-8.5-3.8-8.5-8.5V335.6c0-14.1 9.3-26.6 22.8-30.7zM24 368c-13.3 0-24 10.7-24 24s10.7 24 24 24H64.3c-.2-2.8-.3-5.6-.3-8.5V368H24zm592 48c13.3 0 24-10.7 24-24s-10.7-24-24-24H305.9c-6.7 16.3-14.2 32.3-22.3 48H616z"/></svg>
               </div>
               <br>
           </div>

           <div class="input-box reveal fadeIn">
               <label for="reservation_date">Reservation Date (mm/dd/yyyy):</label>
               <div class="input-wrapper">
                   <input type="text" name="reservation_date" id="reservation_date" required placeholder="Date">
                   <!--<i class="fas fa-calendar-days"></i>-->
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192h80v56H48V192zm0 104h80v64H48V296zm128 0h96v64H176V296zm144 0h80v64H320V296zm80-48H320V192h80v56zm0 160v40c0 8.8-7.2 16-16 16H320V408h80zm-128 0v56H176V408h96zm-144 0v56H64c-8.8 0-16-7.2-16-16V408h80zM272 248H176V192h96v56z"/></svg>
               </div>
               <br>
           </div>

           <div class="input-box reveal fadeIn">
               <label for="reservation_details">Reservation Details (What do you want to use?):</label>
               <div class="input-wrapper">
                   <input type="text" name="reservation_details" id="reservation_details" required placeholder="Details">
                   <!--<i class="fas fa-circle-info"></i>-->
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
               </div>
               <br>
           </div>
           <input class="submit" type="submit" value="Submit">
       </div>
   </form>
</div>
{% endblock %}