mortgage repayment calculator with react

What specific areas of your project would you like help with?

I want help - why does my left crad and right card overflow the conatiner, i solved using overflow attribute this caused an issue while using grid takes space only in the height and width i had given it body { margin: 0; padding: 0; box-sizing: border-box; font-family: "Plus Jakarta Sans", sans-serif; }

.mortgagecalc__container { background-color: var(--Slate-100); height: 100vh; width: 100vw; display: grid; place-items: center; }

.mortgagecalc__card { background-color: var(--White); border-radius: 10px; height: 70%; width: 50%; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }

.mortgagecalc__card-right, .mortgagecalc__card-left { padding: 30px; display: grid; }

.mortgagecalc__card-right, .mortgagecalc__card-left would over flow the card even when i had specified the height and witdth