Используя контактную форму 7 в Elementor, но не могу правильно выровнять текстовое поле

Question

Я попытался выровнять свое текстовое поле в контактной форме 7, и что-то странное произошло, когда я установил ширину в каждом текстовом поле. «Text1» и «Text2» используют тот же стиль CSS, что и «Text3» и «Text4».

Они все следующие, и я установил ширину contact0 на 50%. Но почему эти две формы показывают по-разному?

https://i.imgur.com/dR5t8TI.png Контактная форма 7

<div>
    <form id="contact0">
[email* eml  placeholder "Text1"]
[text phn  placeholder "Text2"]
    </form>
</div>
<div>
    <form id="contact0">
[email* eml  placeholder "Text3"]
[text phn  placeholder "Text4"]
    </form>
</div><div>
    <form id="contact1">
[email* eml  placeholder "Text5"]
[text phn  placeholder "Text6"]
    </form>
</div>

CSS

CSS
#contact0{
    width: 48%;
    float: left;
}
#contact1{
    width: 48%;
    float: right;
}

Большое спасибо за ответ на мой вопрос.

Answer 1

Я бы настоятельно рекомендовал стилизовать элементы в вашей форме, не создавая три формы, как вы.

Например:

Контактная форма 7

 <div class="contact-form-style">
 <p class="style1">[text* text placeholder "Name*"]</p>
 <p class="style2">[email* email placeholder "Email*"]</p>
 <p class="style2">[textarea* textarea placeholder "Textt*"]</p>
 [submit "Submit"]
 </div>

Затем попытайтесь оформить его так:

style.css

 .contact-form-style {
 /* your CSS */
 }
 .style1 {
 /* your CSS */
 }
.style2 {
 /* your CSS */
 }