title: How to stop <input> and <div> items overflowing out of a CSS grid column?
body: <p>This is my first question. I've created a simple tip calculator using HTML, CSS and Javascript.</p>
  <p><a href="https://i.stack.imgur.com/Bnjsz.png" rel="nofollow noreferrer">Click here to view screenshot of the simple tip calculator issue</a></p>
  <p>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.</p>
  <p>How can I make these inputs and div sit INSIDE the CSS grid column?</p>
  <p>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!</p>
  <p>Thank you for your help in advance!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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
  
          }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*,
  *::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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-calculator"&gt;
          &lt;h1 class="heading"&gt;Tip Calculator&lt;/h1&gt;
          &lt;div class="wrapper"&gt;
                  &lt;p class="text bill-amount"&gt;Bill Amount (in dollars)&lt;/p&gt;
                  &lt;input type="number" class="input bill-amount"&gt;
                  &lt;p class="text tip-amount"&gt;Tip Amount (as a %)&lt;/p&gt;
                  &lt;input type="number" class="input tip-amount"&gt;
                  &lt;button class="btn" onClick=calculate()&gt;
                      Calculate Tip and Total Bill
                  &lt;/button&gt;
              &lt;div class="total-bill-amount"&gt;Total Amount comes to: &lt;/div&gt;
              &lt;div class="total-bill-amount-output"&gt;
                  &lt;span&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here's the codepen to look at the code...</p>
  <p><a href="https://codepen.io/fmc-design/pen/wvWNgpw" rel="nofollow noreferrer">https://codepen.io/fmc-design/pen/wvWNgpw</a></p>