当前用户界面：

所需的用户界面：

如何使右侧部分中的输入元素停止延伸到整个右侧部分？我认为问题出在我的 .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; }

 
 
 
   
 
0000 0000 0000 0000
 
Jane Appleseed
 
00/00
 
 
 
  
000
 
 
 
 
 
 
 
Cardholder Name
  
 
 
Card Number
  
 
 
 
EXP. DATE (MM/YY)
 
 
  
 
  
 
 
 
 
CVC
  
 
  
 
 

我尝试手动调整网格列宽度，它有点起作用。当对两列使用固定 px 值（即 200px 300px）时，我可以操纵输入的宽度，但它仍然没有解决我的问题。

.grid-1 和 .grid-2 div 类（包含所述输入）缩小了，但 .card-information 没有缩小。