HTML -webkit-center issue - html

Question

I wrote some code and I realize there is an issue. When I use -webkit-center and write something in textbox, all items going to the right. I tried other -webkit align settings but there are no problem, just -webkit-center. I researched about it but I can't find anything. Can anyone explain why?
Here is the code you can also try.
<div id="mainDiv" style="text-align: -webkit-center; display: inline-grid; margin-left: 40%;border-style:double;">
<span>HEADER</span>
<input name="header" type="text" id="header" style="margin: 20px;width:173px;">
<span>CONTENT</span>
<input name="content" type="text" id="content" style="margin: 20px;height:50px;width:350px;">
<span>HEADER COLOR</span>
<input name="headColor" type="text" id="headColor" style="margin: 20px;width:173px;">
<span>CONTENT COLOR</span>
<input name="contColor" type="text" id="contColor" style="margin: 20px;width:173px;">
<input type="submit" name="button" value="SUBMIT" id="button" style="height: 30px;width:173px;margin:20px;">
</div>

Answer 1

-the webkit-center property works differently than the normal text-center property. Instead of aligning the content, block tries to sort the elements.
I got the same look by doing different styling. You can control it. for each input, you will need to type media query to be responsive because you give constant width values.
#mainDiv {
display: flex;
flex-direction: column;
align-items: center;
}
<div id="mainDiv" style=" text-align: center;width: 40%; margin:auto;border-style:double;">
<span>HEADER</span>
<input name="header" type="text" id="header" style="margin: 20px;width:173px;">
<span>CONTENT</span>
<input name="content" type="text" id="content" style="margin: 20px;height:50px;width:350px;">
<span>HEADER COLOR</span>
<input name="headColor" type="text" id="headColor" style="margin: 20px;width:173px;">
<span>CONTENT COLOR</span>
<input name="contColor" type="text" id="contColor" style="margin: 20px;width:173px;">
<input type="submit" name="button" value="SUBMIT" id="button" style="height: 30px;width:173px;margin:20px auto;">
</div>

Answer 2

Hi Göksel ÖZER
You could try to use the code below to experiment with some other features and HTML tags for this type of scenarios.This will include separating the inline style and include it in a tag in the head section of the HTML or if possible, save it in a separated CSS file to include it on the head of the html file as well for best practices.
I kindly invite you to start digging more about the fantastic world of CSS, Please have a look at this link for more information regarding this amazing world.
input[type=button], input[type=submit], input[type=reset] {
background-color: #9F9F9F;
border: 2px solid gray;
color: white;
padding: 0 10px;
text-decoration: none;
margin: 4px;
cursor: pointer;
}
#mainDiv {
text-align: center;
text-align: -moz-center;
text-align: -webkit-center;
display: inline-grid;
width:55%;
border-style:double;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -1%);
}
.header{
color:#A9A9A9 !important;
margin-bottom: 5px;
}
#button {
height:30px;
width:173px;
margin:20px;
}
textarea {
width:174px !important;
height:50px !important;
padding: 0;
border: 1px solid #ccc;
text-align: center;
text-align: -moz-center;
text-align: -webkit-center;
}
.myinputs {
height:20px;
line-height:20px;
width:173px;
text-align: center;
text-align: -moz-center;
text-align: -webkit-center;
}
<div id="mainDiv">
<h4 class="header">HEADER</h4>
<input name="header" type="text" id="header" class="myinputs">
<h4 class="header">CONTENT</h4>
<input name="content" type="text" id="content" class="myinputs">
<h4 class="header">HEADER COLOR</h4>
<input name="headColor" type="text" id="headColor" class="myinputs">
<h4 class="header">CONTENT COLOR</h4>
<textarea class="header">
</textarea>
<input type="submit" name="button" value="SUBMIT" id="button">
</div>