wordpressお問い合わせフォーム7バリデーションがそれぞれの入力にアライメントされていません

Question

私はWordpressサイトに "contact form 7"というプラグインを持っています。

出力デザインを試したときの応答です。

これは私が私の "コンタクトフォーム7" に追加されたHTMLフォームです。私はdiv内でそれらをラップすることを考えています

.form-holder { 
    text-align: center; 
    padding: 20px 5%; 
    color: #fff; 
} 

.rounded-input { 
    max-width: 1020px; 
    margin: 20px auto; 
} 

.rounded-input.cols-4 { 
    border: 1px solid #fff; 
    border-radius: 3px; 
    width: 23%; 
    margin: 15px 1%; 
    background: transparent; 
    color: #fff; 
} 

：

<footer class="contact-form clearfix" style="background-image: url(<?php echo get_template_directory_uri(); ?>/img/contact-bg.png)"> 
    <div class="form-holder"> 
    <h2>Together, we’ll do great.</h2> 
    <p> Cras venenatis feugiat nibh quis tempus. Quisque libero nibh, consequat posuere,<br> tempus pulvinar purus.</p> 

    <?php echo do_shortcode('[contact-form-7 id="66" title="Contact form"]'); ?> 
    </div> 
</footer> 

が、これは私の私のフッターフォーム用のスタイルシートです。そして、ここ

[response] 
[text* your-name class:rounded-input class:cols-4 placeholder "Your Name"] 
[text* your-position class:rounded-input class:cols-4 placeholder "Position"] 
[text* company class:rounded-input class:cols-4 placeholder "Company Name"] 
[email* your-email class:rounded-input class:cols-4 placeholder "Email Name"] 

<label class="center-content"> 
    [checkbox* agreement class:rounded-input "I’m looking for the best solution with fantastic local support."] 
</label> 

    [submit class:button "Get a Solution"] 

<p><small>*Your privacy is very important to us. To learn more about our information processesing procedures, please visit our <a href="#">Privacy Policy</a>.</small></p> 

は私のPHPファイル内のHTMLです。あなたは18のコルのを割り当てたあなたのHTML内

Answer 1

、あなただけの12のCOLSを使用するので、

[text* your-name class:rounded-input class:cols-3 placeholder "Your Name"]