How to align a form in the center of the page? - html

Question

With the following code, it shows me that the form is centered on its right side which isn't what I'm going for. I struggle to align the form in the center of the page from the center of the form. I added the HTML and CSS so you can see what it looks like. I hope someone can help resolve this problem :')
.contacter {
width: 90%;
margin: 5%;
text-align: center;
padding-top: 0px;
}
.contacter h1 {
font-size: 36px;
font-weight: 700;
text-align: center;
color: rgb(255, 255, 255);
}
/*formulaire -------------------------------------------------------------------------*/
.formulaire {
text-align: center;
margin: 5%;
padding-top: 0;
width: 90%;
}
.row {
text-align: center;
}
.form {
max-width: 50%;
margin-bottom: 1rem;
}
.form {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 10px;
align-items: center;
}
#message {
height: 200px;
}
.btn {
border-radius: 10px;
height: 50px;
background-color: #9BA7C0;
border-color: transparent;
width: 175px;
font-size: 1rem;
}
div.frm {
display: block;
text-align: center;
}
form {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
<section>
<div class="boite-1">
<section class="contacter">
<h1>CONTACTER L'ETUDE</h1>
<div class="formulaire">
<form class="frm">
<div class="row">
<div class="frm-col">
<input type="text" class="form" name="nom" id="nom" placeholder="Nom*">
</div>
</div>
<div class="row">
<div class="frm-col">
<input type="text" class="form" name="societe" id="societe" placeholder="Société">
</div>
</div>
<div class="row">
<div class="frm-col">
<input type="text" class="form" name="mail" id="mail" placeholder="Adresse mail*">
</div>
</div>
<div class="row">
<div class="frm-col">
<input type="text" class="form" name="tel" id="tel" placeholder="Téléphone*">
</div>
</div>
<div class="row">
<div class="frm-col">
<textarea class="form" name="message" id="message" cols="30" rows="7" placeholder="Message*"></textarea>
</div>
</div>
<div class="row">
<div class="sbmt">
<input type="submit" value="Envoyer la demande" class="btn">
<span class="demande envoyée"></span>
</div>
</div>
</form>
</div>
</section>
</div>
</section>

Answer 1

you can use
.frm-col {
display: flex;
justify-content: center;
}

Answer 2

In Your css file replace the .contacter with this below
.contacter {
width: 90%;
margin: 5%;
text-align: center;
padding-top: 0px;
width:100%;
display: flex;
align-items: center;
justify-content: center;
}
This will solve your issue
for more info on flex : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

.formulaire{
margin: auto;
padding-top: 0;
width: 90%; // try using a fixed with if it is still not working
}
or
.frm-col{
display: flex;
justify-content: center;
}