How to align input boxes center? - html

Question

I have difficulty trying to put the input boxes for a form in the middle of the form, they don't seem to get affected by justify-content and align-items
(This question has been asked before, but I don't use labels, so the answers don't seem to work for me)
.form_exterior{
display: block;
width: 80vw;
height: fit-content;
width: 50vw;
background-color: #d3d3d3;
border: solid 1px;
border-radius: 60px;
margin: 50px auto;
}
.grid_form{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-gap: 20px;
}
.form_title{
display: flex;
justify-content: center;
}
.section_button_form{
text-align: center;
}
.form_boxes{
display: flex;
text-align: center;
width: 50%;
}
<section>
<article class="form_exterior">
<form class="form_items">
<section class="grid_form">
<h1 class="form_title">Personal Information</h1>
<input class="form_boxes" type="text" name="name" value="Name">
<input class="form_boxes" type="text" name="last name" value="Last name">
<input class="form_boxes" type="text" name="email" value="Email">
<input class="form_boxes" type="text" name="phone number" value="Phone number">
<h1 class="form_title">Shipping information</h1>
<select class="form_boxes" id="country" name="Select country">
<option>select country</option>
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
<input class="form_boxes" type="text" name="city" value="City">
<input class="form_boxes" type="text" name="postal code" value="Postal code">
<input class="form_boxes" type="text" name="street" value="Street address">
</select>
<section class="section_button_form">
<button onclick="alertForm()" class="button_form" type="button" name="order_button">order</button>
<button class="button_form" type="button" name="go_back_button">go back</button>
</section>
</form>
</article>
</section>

Answer 1

You can try this, it might save your issue:
.grid_form{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-gap: 20px;
justify-items : center;
}

Answer 2

I believe your input boxes are block level elements and therefore are referenced to the width of their container.
You can set the width in your input element.
: The Input (Form Input) element
You could also try changing the display attribute on your input box to display: inline-block.
You might need to set a min-width on those elements also.