title: wordpress Contact form 7 validation not aligning to respective input
body: <p>I have the plugin "contact form 7" on my Wordpress site and I got stuck on how to align the validation messages properly.</p>
  
  <p>this is the response when ever I try the output design.</p>
  
  <p><a href="https://i.stack.imgur.com/IHaes.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IHaes.jpg" alt="enter image description here"></a></p>
  
  <p>This is the HTML form I added to my "contact form 7".</p>
  
  <pre><code>[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"]
  
  &lt;label class="center-content"&gt;
      [checkbox* agreement class:rounded-input "I’m looking for the best solution with fantastic local support."]
  &lt;/label&gt;
  
      [submit class:button "Get a Solution"]
  
  &lt;p&gt;&lt;small&gt;*Your privacy is very important to us. To learn more about our information processesing procedures, please visit our &lt;a href="#"&gt;Privacy Policy&lt;/a&gt;.&lt;/small&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Then here is the HTML in my PHP file:</p>
  
  <pre><code>&lt;footer class="contact-form clearfix" style="background-image: url(&lt;?php echo get_template_directory_uri(); ?&gt;/img/contact-bg.png)"&gt;
      &lt;div class="form-holder"&gt;
      &lt;h2&gt;Together, we’ll do great.&lt;/h2&gt;
      &lt;p&gt; Cras venenatis feugiat nibh quis tempus. Quisque libero nibh, consequat posuere,&lt;br&gt; tempus pulvinar purus.&lt;/p&gt;
  
      &lt;?php echo do_shortcode('[contact-form-7 id="66" title="Contact form"]'); ?&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>Then this is my stylesheet for my footer form:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>I am thinking of wrapping them inside a <code>div</code>.</p>