使列网格中的项目彼此左对齐

Question

在id="contact"节中，我试图将标题和简短的一句话描述放在一栏中，并在右栏中的输入字段下添加一封带有提交按钮的电子邮件提交表单。我希望电子邮件输入元素覆盖整个右列，并使按钮左对齐其下方的边缘。我有一个草图来显示我要寻找的附件。

到目前为止，本节已经完成了我希望它立即执行的所有操作，但是尽管.latest-from-here .input-email类（嵌套在父节#contact内）的类项justify-self:start; align-self: center;是{ {1}}。

https://codepen.io/holmedw/pen/KrvJEb

素描：

 #contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: left;
    grid-column-gap: 80px;
    margin-left: 80px;
    margin-right: 80px;
    height: 480px;
    align-items:center;
}

.latest-from-here .input-email {
    position:relative;
    z-index: -1;
    justify-self:start;
    align-self: center;
}

Answer 1

如果您删除了辩解项：left;在#contact中，将宽度：100％添加到您的输入字段中，即可解决问题。

*{
box-sizing:border-box
}
#contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 80px;
    margin-left: 80px;
    margin-right: 80px;
    height: 480px;
    align-items:center;
}

.latest-from-here .input-email {
    position:relative;
    z-index: -1;
    justify-self:start;
    align-self: center;
}

.email{
width:100%

}

<section id="contact">
              <div class="latest-from-here">
                <h2>Get the latest from Aer</h2>
                <p>Don't miss out on new arrivals, offers and events.</p>
              </div>

              <div class="input-email">
                <form id="form" action="https://www.freecodecamp.com/email-submit">
                  <input name="email" id="email" type="email" placeholder="Enter your email" class="email" required/>
                  <div></div>
                  <input id="submit" type="submit" value="Submit" class="btn-submit"></input>                
              </form> 
              </div>
            </section>