Cannot get webpage content to fill screen - css

Question

I am currently working on a webpage login/signup screen and I can't get the content to display on the whole screen. I am using Bulma as the library and handlebars. On my dashboard page after login, the content displays full screen but I can't get the login page to do the same.
Any help would be appreciated.
body {
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://wallpaperaccess.com/full/1431610.jpg");
}
.login-container {
display: flex;
justify-content: center;
text-align: left;
}
.card-header {
justify-content: center;
padding: 10px 0px;
}
.country-label {
color: white;
text-shadow: 2px 2px black;
}
.signin-title {
color: white;
text-shadow: 2px 2px black;
font-size: 40px;
}
<section class="hero" style="background-color: rgb(10, 163, 125); border-bottom: rgb(12, 14, 15) 5px solid; border-left: rgb(12, 14, 15) 5px solid; border-right: rgb(12, 14, 15) 5px solid ">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-centered animated lightSpeedIn">
Take Me Away....<i class="fa-solid fa-earth-africa"></i>
</h1>
</section>
<section class="section">
<div class="login-container">
<div class="columns">
<div class="column is-half">
<h1 class="signin-title"> Sign in</h1>
<form class="form login-form">
<div class="field">
<label for="email-login">Email</label>
<p class="control has-icons-left has-icons-right">
<input class="input" type="email" name="email" placeholder="Email" id="email-login">
<span class="icon is-small is-left">
<i class="fa-solid fa-envelope"></i>
</span>
</p>
</div>
<div class="field">
<label for="password-login">Password</label>
<p class="control has-icons-left has-icons-right">
<input class="input" type="password" name="password" placeholder="Password" id="password-login">
<span class="icon is-small is-left">
<i class="fa-solid fa-key"></i>
</span>
</p>
</div>
<div class="field">
<p class="control">
<button class="btn btn-primary" type="submit">
Login
</button>
</p>
</div>
</form>
</div>
<form class="form signup-form">
<div class="column">
<h1 class="signin-title">Sign Up</h1>
<div class="field">
<label for="name-signup">Name</label>
<p class="control has-icons-left has-icons-right">
<input class="input" type="text" name="name" placeholder="Name" id="name-signup">
<span class="icon is-small is-left">
<i class="fa-solid fa-user"></i>
</span>
</p>
</div>
<div class="field">
<label for="email-signup">Email</label>
<p class="control has-icons-left has-icons-right">
<input class="input" type="email" name="email" placeholder="Email" id="email-signup">
<span class="icon is-small is-left">
<i class="fa-solid fa-envelope"></i>
</span>
</p>
</div>
<div class="field">
<label for="password-signup">Password</label>
<p class="control has-icons-left has-icons-right">
<input class="input" type="password" name="password" placeholder="Password" id="password-signup">
<span class="icon is-small is-left">
<i class="fa-solid fa-key"></i>
</span>
</p>
</div>
<div class="field">
<p class="control">
<button class="btn btn primary" type="submit">
Sign up
</button>
</p>
</div>
</div>
</div>
</form>
</div>
</section>
<section class="hero" style="background-color: rgb(10, 163, 125); border-top: rgb(12, 14, 15) 5px solid; border-left: rgb(12, 14, 15) 5px solid; border-right: rgb(12, 14, 15) 5px solid ">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-centered animated lightSpeedIn">
Take Me Away....<i class="fa-solid fa-earth-africa"></i>
</h1>
</section>
<script src="/js/login.js"></script>