How to align 2 containers that lay on the center - html

Question

I want to align this:
HTML view
to this but on the center of website:
Desired result
but It goes to left margin instead:
The reality
How can I make this one to be on the center of website?
I have tried using some combinations and different attributes but the result did not change.
.container{
text-align: center;
position:relative;
}
.inputArea{
margin: auto;
display: flow;
}
.deleteArea{
margin:auto;
display:inline-block;
}
<div class="container">
<div class="inputArea" >
<form th:action="#{/}" method="post">
<input type="text" th:id="inputWord" name="inputWord" />
<input type="text" th:id="inputTranslation" name="inputTranslation" />
<input type="text" th:id="language" name="language" value="English" />
<input type="submit" th:id="addWord" value="add" />
</form>
</div>
<div class="inputArea">
<form th:action="#{/delete}" method="post">
<input type="text" th:id="inputWordDelete" name="inputWordDelete" />
<input type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
<input type="text" th:id="languageDelete" name="languageDelete" />
<input type="submit" th:id="deleteWord" value="delete" />
</form>
</div>
</div>
What should I change in my code to achieve the desired result?

Answer 1

Do you intend to achieve something like this? One option could be to use css grid...
.container{
text-align: center;
position: relative;
}
.inputArea form {
margin: auto;
display: inline-grid;
grid-template-columns: auto auto auto minmax(0px, 100px);
text-align: left;
}
<div class="container">
<div class="inputArea" >
<form th:action="#{/}" method="post">
<input type="text" th:id="inputWord" name="inputWord" />
<input type="text" th:id="inputTranslation" name="inputTranslation" />
<input type="text" th:id="language" name="language" value="English" />
<div><input type="submit" th:id="addWord" value="add" /></div>
</form>
</div>
<div class="inputArea">
<form th:action="#{/delete}" method="post">
<input type="text" th:id="inputWordDelete" name="inputWordDelete" />
<input type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
<input type="text" th:id="languageDelete" name="languageDelete" />
<div><input type="submit" th:id="deleteWord" value="delete" /></div>
</form>
</div>
</div>

Answer 2

Here is another way to do it. Have you tried this?
.container {
width: 100%;
}
.container-inner {
margin: 0 auto;
display: table;
}
<div class="container">
<div class="container-inner">
<div class="inputArea" >
<form th:action="#{/}" method="post">
<input type="text" th:id="inputWord" name="inputWord" />
<input type="text" th:id="inputTranslation" name="inputTranslation" />
<input type="text" th:id="language" name="language" value="English" />
<input type="submit" th:id="addWord" value="add" />
</form>
</div>
<div class="inputArea">
<form th:action="#{/delete}" method="post">
<input type="text" th:id="inputWordDelete" name="inputWordDelete" />
<input type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
<input type="text" th:id="languageDelete" name="languageDelete" />
<input type="submit" th:id="deleteWord" value="delete" />
</form>
</div>
</div>
</div>