目前使用者介面：

所需的使用者介面：

如何讓右側部分中的輸入元素停止延伸到整個右側部分？我認為問題出在我的 .right-section 表單中的網格列

請查看 HTML 和 CSS 並告訴我，我完全不知道如何解決這個問題。

/* Root Var */

:root {
  /* Primary Colors */
  --active-input-color: linear-gradient(hsl(249, 99%, 64%), #hsl(278, 94%, 30%));
  --error-color: hsl(0, 100%, 66%);
  /* Neutral Colors */
  --white: hsl(0, 0%, 100%);
  --light-grayish-violet: hsl(270, 3%, 87%);
  --dark-grayish-violet: hsl(279, 6%, 55%);
  --very-dark-violet: hsl(278, 68%, 11%);
  /* Mobile Width */
  --mobile-width: 375px;
}


/* Reset */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-size: 18px;
  font-family: 'Space Grotesk', sans-serif;
  /* Add bg image in CSS, here, inside body */
  background-image: url(/img/bg-main-desktop.png);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  min-height: 100vh;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.right-section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50vw;
}

.right-section form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2rem;
}

.grid-1 {
  display: flex;
  flex-direction: column;
  grid-column: 1 / 3;
}

.grid-2 {
  display: flex;
  flex-direction: column;
  grid-column: 1 / 3;
}

.card-information {
  display: flex;
  flex-direction: row;
  grid-column: 1 / 3;
  gap: 1rem;
}

.card-date {
  display: flex;
  flex-direction: column;
}

.double-input {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.grid-3 {
  display: flex;
  flex-direction: column;
}

p {
  text-transform: uppercase;
  font-size: 11px;
}

input {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--light-grayish-violet);
  border-style: solid;
  border-color: var(--light-grayish-violet);
  border-radius: 5px;
}

#chname {
  height: 40px;
  text-indent: 1em;
}

#cnumber {
  height: 40px;
  text-indent: 1em;
}

#expdate-mm {
  height: 40px;
  text-indent: 1em;
}

#expdate-yy {
  height: 40px;
  text-indent: 1em;
}

#cvc {
  height: 40px;
  text-indent: 1em;
}

#button {
  color: var(--white);
  background-color: var(--very-dark-violet);
  height: 50px;
  align-self: center;
  border-radius: 10px;
  cursor: pointer;
  grid-column: 1 / 3;
}

.left-section {
  width: 50vw;
}

.card-details {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.card-display {
  color: var(--white);
  z-index: 1;
}

.card-number {
  position: relative;
  top: 0px;
  right: -120px;
  font-size: 28px;
  letter-spacing: 0.1rem;
}

.card-name {
  position: relative;
  top: 45px;
  right: 220px;
  font-size: 12px;
}

.card-expiry {
  position: relative;
  top: 45px;
  right: 20px;
  font-size: 12px;
}

.card-front-img {
  position: relative;
  top: 100px;
  left: 200px;
  z-index: 0;
}

.card-logo {
  position: relative;
  /* top: 140px;
    left: 230px; */
  top: -60px;
  left: -210px;
}


/* Back of Credit Card */

.card-back-img {
  position: relative;
  top: 80px;
  left: 260px;
  z-index: 0;
}

.card-cvc {
  position: relative;
  top: -60px;
  left: 600px;
  font-size: 12px;
}

<div class="container">
  <div class="left-section">
    <section class="cards">
      <div class="card-front">
        <img src="/img/bg-card-front.png" alt="" class="card-front-img">
        <img src="/img/card-logo.svg" alt="" class="card-logo">
        <div class="card-details">
          <p class="card-display card-number">0000 0000 0000 0000</p>
          <p class="card-display card-name">Jane Appleseed</p>
          <p class="card-display card-expiry">00/00</p>
        </div>
      </div>
      <div class="card-back">
        <img src="/img/bg-card-back.png" alt="" class="card-back-img">
        <p class="card-display card-cvc">000</p>
      </div>
    </section>
  </div>
  <section class="right-section">
    <form action="">
      <div class="grid-1">
        <p id="chname-label">Cardholder Name</p>
        <input type="text" id="chname" name="chname" value="e.g. Jane Appleseed">
      </div>
      <div class="grid-2">
        <p id="cnumber-label">Card Number</p>
        <input type="text" id="cnumber" name="cnumber" value="e.g. 1234 5678 9999 0000">
      </div>
      <div class="card-information">
        <div class="card-date">
          <p id="expdate-label">EXP. DATE (MM/YY)</p>
          <div class="double-input">
            <div>
              <input type="text" id="expdate-mm" name="expdate" value="MM">
            </div>
            <div>
              <input type="text" id="expdate-yy" name="expdate" value="YY">
            </div>
          </div>
        </div>
        <div class="grid-3">
          <p id="cvc-label">CVC</p>
          <input type="text" id="cvc" name="cvc" value="e.g. 123">
        </div>
      </div>
      <input type="button" id="button" value="Confirm">
    </form>
  </section>
</div>

我嘗試手動調整網格列寬度，它有點起作用。當對兩列使用固定 px 值（即 200px 300px）時，我可以操縱輸入的寬度，但它仍然沒有解決我的問題。

.grid-1 和 .grid-2 div 類別（包含所述輸入）縮小了，但 .card-information 沒有縮小。