how do i make sure the Username is over Password
i am having problems moving the username over the password. this is the code and i am writing in HTML/CSS <html> <head> <script src="https://kit.fontawesome.com/4187ad6378.js" crossorigin="anonymous"></script> <title>Page Title</title> <style> html, body { margin: 0; padding: 0; height: 100%; width: 100%; font-family: sans-serif; font-size: 20px; } .container{ display: grid; grid-template-columns: 1fr 1fr; height: 100%; width: 100%; background-color: #1b1b7b; } .upper-container { height: 100%; width: 100%; color: white; background-color: #0D1B47; display: flex; flex-direction: column; } .Custom-content { margin-top: 20px; margin-bottom: 20px; } .login-form { display: flex; justify-content: top; align-items: top; margin-top: 500px; margin-right: 100px; } .title { display: grid; grid-template-columns: 3; grid-template-rows: 3; } .lower-container{ grid-template-columns: 1fr 1fr; justify-content: center; align-items: center; } .username { margin-top: 0cm; text-align: center; justify-content: space-between; } test-container { border: 2px solid green; text-align:center; } </style> </head> <body> <div class="container test-container"> <div class="lower-container test-container"> <div style="justify-content: start;"> <img class="test-container" src="c:\ss for PNG og andre ting uwu\Picture1 paml.png" alt="palm" style="width: 400px; height: auto; margin-top: 50px; margin-right: 200px;"> </div> </div> <div class="upper-container"> <div class="login-form test-container"> <div class="username"> <i class="fa-regular fa-user"></i> <label for="uname"><b>Usernam