Bagaimanakah cara saya menghentikan kotak input dalam grid saya daripada meregang pada skrin?

Question

Antaramuka Pengguna Semasa:

Antaramuka Pengguna Diperlukan:

Bagaimana untuk membuat elemen input di bahagian kanan berhenti meluas ke seluruh bahagian kanan? Saya rasa masalahnya ialah lajur grid dalam borang .bahagian kanan saya

Sila lihat HTML dan CSS dan beritahu saya, saya langsung tidak tahu bagaimana untuk membetulkannya.

/* 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>

Saya cuba melaraskan lebar lajur grid secara manual dan ia berjaya. Saya boleh memanipulasi lebar input apabila menggunakan nilai px tetap untuk kedua-dua lajur (iaitu 200px 300px), tetapi ia masih tidak menyelesaikan masalah saya.

Kelas div .grid-1 dan .grid-2 (mengandungi input tersebut) mengecut, tetapi .kad-maklumat tidak.

Answer 1

Agak sukar untuk memberitahu perkara yang anda tanyakan, tetapi jika anda hanya mahu mengehadkan lebar input borang, cuba tetapkan lebar yang ditentukan pada elemen borang (iaitu .right-section form {width : 70%;} 或输入的父容器（即 .grid-1、.grid-2、.card-information {width: 70%;}). Laraskan mengikut keperluan.