Center an input with a padding - html

Question

I have a form the whole form needs to be centered in the page. The inputs need some space around the letters for design reasons. If I give a padding the inputs are not perfectly centered anymore.
Can I have the inputs centered and the text inside with some space at the same time?
Here to check:
https://jsfiddle.net/291thr5d/
CSS:
form {
margin: 40px auto;
width: 80%; max-width: 600px; min-width: 300px;
background-color: aliceblue;
}
.title {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size:40px; line-height:40px;
letter-spacing: 1px;
margin:10px 0; padding: 20px;
}
HTML:
<form action="update.php" method="post">
<input type="text" name="titol" value="Title post" class="title">
<input type="submit" name= "actualitzar" value="Submit" class="submit">
</form>

Answer 1

You need to add:
* {
box-sizing: border-box;
}
form {
margin: 40px auto;
width: 80%;
min-width: 300px;
background-color: aliceblue;
}
.title {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
line-height: 40px;
letter-spacing: 1px;
margin: 10px 0;
padding: 20px;
}
* {
box-sizing: border-box;
}
<form action="update.php" method="post">
<input type="text" name="titol" value="Title post" class="title">
<input type="submit" name="actualitzar" value="Submit" class="submit">
</form>
box-sizing includes padding and border in the element's total width and height
Documentation

Answer 2

please add text-align: center to your .title class properties.
form {
margin: 40px auto;
width: 80%;
min-width: 300px;
background-color: aliceblue;
}
.title {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
line-height: 40px;
letter-spacing: 1px;
margin: 10px 0;
padding: 20px;
text-align: center;
}
* {
box-sizing: border-box;
}
<form action="update.php" method="post">
<input type="text" name="titol" value="Title post" class="title">
<input type="submit" name="actualitzar" value="Submit" class="submit">
</form>