How to stop <input> and <div> items overflowing out of a CSS grid column?

Question

This is my first question. I've created a simple tip calculator using HTML, CSS and Javascript.

Click here to view screenshot of the simple tip calculator issue

You can see that the inputs and the result div are overflowing from the CSS grid columns, but the button is perfectly aligned within the column.

How can I make these inputs and div sit INSIDE the CSS grid column?

I've looked up and tried a number of fixes, but nothing seems to be working. I feel like I'm missing something really simple. I'm really new to HTML, CSS and Javascript!

Thank you for your help in advance!

function calculate() {
            var container = document.querySelector(".container-calculator")
            var wrapper = container.querySelector(".wrapper")
            var billInput = wrapper.querySelectorAll("input") [0]
            billInput = Number(billInput.value)
            console.log("Bill Amount Is: $" + billInput + " " + typeof(billInput))
            var tipInput = wrapper.querySelectorAll("input") [1]
            console.log("Tip percentage is: " + tipInput.value + "%")

            var tip = tipInput.value / 100
            tip = Number(tip)
            console.log("Tip calculation is: " + tip)
            
            var totalTipAmount = tip * billInput
            console.log("Total Tip Amount Is: $" + totalTipAmount)

            var totalAmount = (billInput + totalTipAmount)
            console.log("Total Bill Amount Is: $" + totalAmount)

            var totalArea = wrapper.querySelector(".total-bill-amount-output")

            var span = totalArea.querySelector("span")
            span.innerHTML = "$" + totalAmount

        }

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 2;
  }

.container-calculator {
    margin: 50px auto;
    width: 80%;
    border: 2px solid black;
    box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
;

}

.heading {
    margin: 0;
    text-align: center;
    font-size: 40px;
    font-weight: 900;
}

.wrapper {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: minmax(auto);
    grid-gap: 10px;
    padding: 20px;
    width: 80%;
    margin: 20px auto;
    align-items: center;
}

.text bill-amount {
    grid-column: 1;
    grid-row: 1;
}

.text tip-amount {
    grid-column: 1;
    grid-row: 2;
}

.input bill-amount {
    grid-column: 2;
    grid-row: 1;
}

.input tip-amount {
    grid-column: 2;
    grid-row: 2;
}

.input {
    width: 100%;
    padding: 10px;
    border: 2px solid;
    font-size: 20px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.btn {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    background-color: limegreen;
    padding: 10px;
    color: white;
    font-size: 20px;
    font-weight: 700;
    margin-top: 5px;
    width: 100%;
    margin: auto 0;
    border: none;
    box-shadow: 0 8px 6px -6px black;
;

}

.total-bill-amount {
    grid-column: 1;
    grid-row: 4;
}

.total-bill-amount-output {
    grid-column: 2;
    grid-row: 4;
    width: 100%;
    height: 30px;
    border: 2px solid;
    padding: 8px;
    margin: 10px auto;
}

.span {
    align-items: center;
}

<div class="container-calculator">
        <h1 class="heading">Tip Calculator</h1>
        <div class="wrapper">
                <p class="text bill-amount">Bill Amount (in dollars)</p>
                <input type="number" class="input bill-amount">
                <p class="text tip-amount">Tip Amount (as a %)</p>
                <input type="number" class="input tip-amount">
                <button class="btn" onClick=calculate()>
                    Calculate Tip and Total Bill
                </button>
            <div class="total-bill-amount">Total Amount comes to: </div>
            <div class="total-bill-amount-output">
                <span></span>
            </div>
        </div>

    </div>

Here's the codepen to look at the code...

https://codepen.io/fmc-design/pen/wvWNgpw

Answer 1

The problem: The input elements are overflowing the grid boundaries.

There are some settings for border etc and their widths will add to the width taken up, but if the default box-sizing is used then they will be extra to the element's width.

To get them counted in as part of the width put this at the top of your CSS

* {
box-sizing: border-box;
}

(of course, put it more locally to just the calculator if there is other code that relies on the default setting).