How can i match the element width with the nested elements?

I'm doing a Calculator, which consists of a form tag with a grid layout and inside two text areas and multiple buttons.

To make it more visually appealing i added a background color, and when i resize the window the background seems to not "cover" all the buttons.Calculator resized

After some research i found out that the form element width was smaller than the device witdh but the buttons contained in the grid layout did cover all the device width. Calculator, form size and grid

¿How can i make that the buttons "stay" in the form so that the background covers all? (This is an assigment and i DO need to use a form to contain the buttons, a gridlayout and be responsive)

  

form {    
    display: grid;         
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2%;   
    color: #444;


   
    max-width: 600px;  
    
    padding:20px;
    background-color: #909497;
    border-radius: 25px;
  }
  
  
input[type=button] {
    background-color: #444;
    color: #fff;
    font-size: 200%;
  }
form > textarea {
    color: green;
    text-align: center;
    font-size: 200%;
    grid-column-start: 1;
    grid-column-end: 5;
    text-align: right;
  }
  h1 {
    text-align: left;    
}

<!DOCTYPE html>
<html lang ="es">
    <head>
        <META CHARSET="UTF-8"/>         
        <link rel="stylesheet" href="CalculadoraRPN.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Calculadora Basica</title>
        <script src="CalculadoraRPN.js"></script>
    </head>
    <body>
        <h1>
            CalculadoraRPN
        </h1>
        
            <form>
                <textarea id="pila" disabled="" rows = 6></textarea>
                <textarea id="pantalla" disabled=""></textarea>
                <!-- <input type="textarea" id="pantalla" disabled=""/> -->

                <input type="button" id="mrc"   value="MRC" onclick="calculadora.botonMemRecallClear()"/>           
                <input type="button" id="m+"    value="M+" onclick="calculadora.botonMemSum()"/>
                <input type="button" id="m-"    value="M-" onclick="calculadora.botonMemSub()"/>            
                <input type="button" id="div"   value="/" onclick="calculadora.botonDivision()"/>

                <input type="button" id="numeric"   value="7" onclick="calculadora.botonNumerico(7)"/>
                <input type="button" id="numeric"   value="8" onclick="calculadora.botonNumerico(8)"/>
                <input type="button" id="numeric"   value="9" onclick="calculadora.botonNumerico(9)"/>
                <input type="button" id="mul"       value="*" onclick="calculadora.botonMultiplicacion()"/>
                

                <input type="button" id="numeric"   value="4" onclick="calculadora.botonNumerico(4)"/>
                <input type="button" id="numeric"   value="5" onclick="calculadora.botonNumerico(5)"/>
                <input type="button" id="numeric"   value="6" onclick="calculadora.botonNumerico(6)"/>
                <input type="button" id="sub"       value="-" onclick="calculadora.botonResta()"/>
                
                
                <input type="button" id="numeric"   value="1" onclick="calculadora.botonNumerico(1)"/>
                <input type="button" id="numeric"   value="2" onclick="calculadora.botonNumerico(2)"/>
                <input type="button" id="numeric"   value="3" onclick="calculadora.botonNumerico(3)"/>
                <input type="button" id="sum"       value="+" onclick="calculadora.botonSuma()"/>       
                
                <input type="button" id="numeric"   value="0" onclick="calculadora.botonNumerico(0)"/>
                <input type="button" id="dec"       value="." onclick="calculadora.botonNumerico('.')"/>
                <input type="button" id="c"         value="C" onclick="calculadora.botonClear()"/>
                <input type="button" id="potencia2" value="x^2" onclick="calculadora.botonPotenciaDeDos()"/>
                
                <input type="button" id="potenciax" value="x^y" onclick="calculadora.botonPotenciaDeX()"/>
                <input type="button" id="sqrt"      value="√▭" onclick="calculadora.botonRaizCuadrada()"/>
                <input type="button" id="sqrt"      value="logx(y)" onclick="calculadora.botonLogaritmo()"/>

                <input type ="button" id="enter" value="Enter" onclick="calculadora.botonEnter()"/>
            </form>
        
        
    </body>

</html>

Solution

Hello and welcome to Stack Overflow!

Main problem:

In your calculator resized .png is happening because you have not set a min-width: to your form element. Doing this allows for the structure of your element not to be sacrificed on screen resizing. Add the following CSS.

form {
   min-width: fit-content;
}

Secondary problem: So at this point, you won't have any odd or empty boxes / elements when you adjust your screen size. But the <form> element itself won't fit (perfectly) on a mobile device. This can be achieved by setting up media queries for your element containing the calculator and by resizing it at certain pixel sizes. That CSS will look something like this.

@media only screen and (max-width: 800px) {
       form {
         width: width of element at 800px;
         height: height of element at 800px;
       }
}