Page larger than required issue; React.js

Question

The current page is as follows: As you can see, there's a lot of white space at the top. I can't seem to figure out how to make that blank space disappear. This is the HTML:

<div className="auth-form-container" style={{display: 'flex',  justifyContent:'center', alignItems:'center', height: '100%'}}>
            <img src={logo} alt="VaporCode Logo"></img>
            <h2 style={{ color: 'white' }}>Register</h2>
        <form className="register-form" onSubmit={handleSubmit}>
            <label htmlFor="firstname" style={{ color: 'white' }}>First Name</label>
            <input value={firstname} firstname="firstname" id="firstname" placeholder="First Name" />
            <label htmlFor="lastname" style={{ color: 'white' }}>Last Name</label>
            <input value={lastname} lastname="lastname" id="lastname" placeholder="Last Name" />
            <label htmlFor="email" style={{ color: 'white' }}>Email</label>
            <input value={email} onChange={(e) => setEmail(e.target.value)}type="email" placeholder="Email" id="email" name="email" />
            <label htmlFor="username" style={{ color: 'white' }}>Userame</label>
            <input value={username} username="username" id="username" placeholder="Username" />
            <label htmlFor="password" style={{ color: 'white' }}>Password</label>
            <input value={pass} onChange={(e) => setPass(e.target.value)} type="password" placeholder="Password" id="password" name="password" />
            <label htmlFor="repeatpassword" style={{ color: 'white' }}>Retype Password</label>
            <input value={reppass} onChange={(e) => setrepPass(e.target.value)} type="password" placeholder="Retype Password" id="repeatpassword" nam>
            <button type="submit">Register</button>
        </form>
        <linkbutton className="link-btn" onClick={() => props.onFormSwitch('login')}>Already have an account? Login here.</linkbutton>
        <div style={{ display: "flex", justifyContent: "center" }}>
            <iframe src="https://www.guilded.gg/canvas_index.html?route=%2Fcanvas%2Fembed%2Fbadge%2F4R5YgKWR" width="294" height="48" frameborder="0">
        </div>
    </div>

Please note that since some of the functions are quite long, the code will not copy correctly since I am programming over SSH. If anyone has a better solution it would be greatly appreciated. (I'm running a vps without ui) This is the CSS:

App {
  text-align: center;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  color: #000000;
  background-image: linear-gradient(79deg, #073a8c, #281369 48%, #135b69);
}

.auth-form-container, .login-form, .register-form {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 600px)  {
  .auth-form-container {
    position:absolute;   
    justify-content: center;
    padding: 1rem;
    border: solid #222222;
    background-color: #000000;
    fill: solid #000000;
    border-radius: 10px;
    margin:30rem;
  }
}

label {
  text-align: left;
  padding: 0.25rem 0;
}
input {
  margin: 0.5rem 0;
  padding: 1rem;
  border: none;
  border-radius: 10px;
}


button {
  border: none;
  background-image: linear-gradient(79deg, #ff893f, #fa8d90 48%, #e769d1);
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #ffffff;
  font-weight : bold;
  transition-duration: 2s;
}


linkbutton {
  border: none;
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #ffffff;
}

.link-btn {
  background: none;
  color: white;
  text-decoration: underline;
}
img {
    margin: 0 auto;
    max-width: 10%;
    height: 10%;
}

I'm programming this in react.js.

I tried forcing the position to be absolute, but this makes the page look weird on smaller screens. Finally, I want the login container to be near the top of the screen. Remember, I don't want this to appear in CSS, I want it to appear in HTML if possible.

Also, if anyone has suggestions for remote programming without ssh, please contact me! ;)

-Thanks! :)

Answer 1

If you are using flexbox to center content, use the App selector and then set .auth-form-container to have height: 100% will fill The entire container height, so 30rem margin-top may be eliminated. Give it a try and if it doesn't work, please attach a working snippet so we can see the real problem. hope it helps you!