CSS GRID - 在右侧跳跃

Question

//嗨，伙计们，所以我试图将表单、h1 和标题拆分为两个单独的列，但是每次我将显示属性放到网格中时，两个元素都在右侧跳跃，知道为什么吗？

@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@200&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

//this is the html

    <section class="hero-area">
            <div class="container grid">
                <div class="hero-text">
                    <h1>Hi! My name is <span class="my-name">Jove</span></h1>
                    <p>I am a freelance software, 
                        mobile apps and full stack web developer</p>
                    <a href="Portfolio.html" class="btn btn-colored">Projects</a>  
                </div>
    
                <div class="hero-form card">
                    <h2>Contact me</h2>
                    <form>
                        <div class="form-control">
                            <input type="text" name="Name" placeholder= "Name" required>
                        </div> 
                        <div class="form-control">
                            <input type="email" name="Email" placeholder= "Email" required>
                        </div> 
                        <div class="form-control">
                            <input type="text" name="Subject" placeholder= "Subject" required>
                        </div> 
                        <textarea placeholder="Message" name="Message" id="" cols="25" rows="5"></textarea>
                        <br>
                        <input type="submit" value="Send" class="btn btn-primary">
                    </form>
                </div>  
            </div>
        </section>

//这是CSS

    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        text-decoration: none;
        list-style-type: none;
    }
     body {
        font-family: 'Roboto Mono', monospace;
        line-height: 1.2;
        
    
     }
     .nav-bar {
         background-color: #333333;
     }
    
     .container {
         max-width: 1200px;
         margin:0 auto;
         padding:10px 30px;
         justify-content: flex-end;
     }
    
     .nav-bar ul {
         display: flex;
        
     }
    
    
     .flex {
         display: flex;
         justify-content: center;
         align-content: center;
         height:100%;
     }
    
     .nav-bar ul li {
         margin:10px 10px;
         letter-spacing: 1px;
     }
     .nav-bar ul li a {
         color: white;
         font-weight: 600;
     }
    
     .nav-bar .flex {
         justify-content: flex-end;
     }
    
     .active, .nav-bar ul li a:hover {
         border-bottom: 2px solid white;
         padding-bottom: 5px;
     }
    
     .grid{
         display: grid;
         grid-template-columns: 300px 200px;
     }
    
     /* hero area */
    
     .hero-area {
         height: 400px;
         background-color: #333333;
         color:#fff;
         position:relative;
     }
    
     .hero-area h1 {
         font-size:40px;
     }
    
     .hero-area p {
         margin:20px 0;
     }
    
     .hero-area .my-name {
         color:Red;
     }

Answer 1

这将其对齐到中心：

.grid{
   display: grid;
   grid-template-columns: 200px 500px;
}