Grid cells stick out when viewport width falls below 225px - html

Question

Why does the form element, which is now a grid element, does not contain its cells (grid cells are sticking out) when viewport width is changed around 225px?
Here's my link to the code I'm having trouble with: https://codepen.io/skanda1395/pen/RXNZZO
What changes do I need to make the following piece of code?
form {
display: grid;
width: 50vw;
margin: auto;
grid-template-columns: 1.1fr 1.5fr;
grid-gap: 17px;
background-color: white;
border-radius: 5px;
padding: 33px;
}

Answer 1

To display properly you can put the tags into divs so the grid will easily work
<div>
<label for="name" id="name-label">Name:</label>
<input class="wide" id="name" type="text" placeholder="Enter your name" required>
</div>
<div>
<label for="email" id="email-label">Email:</label>
<input class="wide" id="email" type="email" placeholder="Enter your email" required>
</div>
<div>
<label for="number" id="number-label">Age:</label>
<input class="wide" id="number" type="number" min="0" max="10" placeholder="Enter your age">
</div>
<div>
<label for="dropdown">What do you do?</label>
<select class="wide" id="dropdown">
<option>Student</option>
<option>Full-time Employee</option>
<option>Self-employed</option>
<option>Other</option>
</select>
</div>
You can too nesting the input inside the label, but to work you have to set the display as 'block' like this label{display:block;}
<label for="name" id="name-label">Name:
<input class="wide" id="name" type="text" placeholder="Enter your name" required>
</label>