forms - フォームのラベルを左揃えにする方法は?

Question

Wordpress テーマ フォームをカスタマイズしようとしています。HTMLコードは次のとおりです。

<form id="commentform" class="comment-form">

  <p class="comment-form-author">
     <label for="author">Name <span class="required">*</span></label>
     <input id="author" name="author" type="text">
  </p>
  <p class="comment-form-email">
     <label for="email">Email <span class="required">*</span></label>
     <input id="email" name="email" type="text">
  </p>
  <p class="comment-form-url">
     <label for="url">Website</label>
     <input id="url" name="url" type="text">
  </p>  
  <p class="comment-form-comment">
     <label for="comment">Comment</label>
     <textarea id="comment" name="comment" cols="45" rows="8">  
     </textarea>
  </p>                                                 
  <p class="form-submit">
     <input name="submit" type="submit" id="submit">
  </p>

</form>

そして、ここに私のCSSコードがあります:

#commentform {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  }

.comment-form-author, .comment-form-email, .comment-form-url, .comment-form-comment {
      display: block;
      -webkit-margin-start: 2px;
      -webkit-margin-end: 2px;
      -webkit-padding-before: 0.35em;
      -webkit-padding-start: 0.75em;
      -webkit-padding-end: 0.75em;
      -webkit-padding-after: 0.625em;
       margin: 0 2px;
       padding: 0.2em 0.625em 0.75em;
       }    

#commentform label {
      display: inline-block;
      float: left; 
      width: 20%; 
      }

#commentform input[type="text"], #commentform textarea {
      display: inline-block;
      float: left; 
      width: 65%; 
      padding: 0.6em;
      padding-bottom: 0.1em;
      padding-left: 0.3em; 
      } 

別のページに同じ CSS を使用した別のフォームがあり、正常に表示されますが、フロートを適用すると、ラベルが右側にくっついて重なり合ってしまいます。私がやろうとしているのは、ラベルを左側に、入力を右側に配置して、.comment-form 内の同じ行に配置することです。私は何を間違っていますか？

ありがとう。