Formulário Contact Form 7

Bom, esse forum é meio tranquilo, então corri atras de alguns exemplos mas ainda não obtive sucesso.

O código no CF7 está assim:

<form>

  <header>
    <h2>Comece agora a receber Assessoria Jurídica. Deixe seus contatos que entraremos em contato.</h2>
  </header>
 <div> 

   <div>
    <label class="desc" id="campo-nome" for="campo-nome">Nome</label>
      [text* nome]

    <label class="desc" id="campo-fone" for="campo-fone">Telefone</label>
       [tel* telefone]

    <label class="desc" id="campo-mail" for="campo-mail">E-mail</label>
       [email* email]

     [submit "Enviar"]
     </div>
</div>

</form>

E o código dentro do CSS está assim:

/* FORM */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form header {
  margin: 0 0 0 0;
  background: #373737;
}
form header h2 {
  margin:0 0 0 25px;
  color:#8d609e;
}
form > div {
  clear: both;
  overflow: hidden;
  padding: 10px;
  margin: 0 0 0 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#8D609E), to(#373737)) repeat-X;
}
form > div > fieldset {
  margin: 0 0 0 0;
  float: left;
}
form > div > label{
	width: 10%;
  float: left;
  padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
  width: 99%;
}
form > div > fieldset label {
	font-size: 90%;
}
fieldset {
	border: 0;
  padding: 0;
}

input[type=text]:focus {
  outline: 0;
  border-color: #8d609e;
}

@media (max-width: 600px) {
  form > div {
    margin: 0 0 0px 0;
  }
  form > div > label{
	  width: 99%;
    float: left;
    margin: 0 0 0px 0;
  }
  form > div > div,
  form > div > fieldset > div {
    width: 99%;
    float: left;
  }
  input[type=text]{
    width: 99%;
  }
}
@media (min-width: 200px) {
  form > div > label{
  	text-align: left;
  }
}

Não estou conseguindo deixar os campos alinhados horizontalmente.

Bom, ficou top o form, visualizado em pc. Mas em tablet e/ou smartphone, os campos não estão descendo, e estão “estourando” o espaço.

Veja como ficaram meus cógidos:

— Código no CF7:

<form>
	<header>
		<h4>Comece agora a receber Assessoria Jurídica. Deixe seus contatos que entraremos em contato.</h4>
	</header>
	<div>
		<div id="left">
    			<label class="desc" id="nome">Nome (Obrigatório):</label>
      			[text* nome]
		</div>
		<div id="center">
			<label class="desc" id="fone">Telefone (Obrigatório):</label>
			[tel* telefone]
		</div>
		<div id="right">
			<label class="desc" id="mail">E-mail (Obrigatório):</label>
			[email* email]
		</div>
		<div id="send">
  		[submit "Enviar" class:campo-send]
		</div>
	</div>
</form>

— Código no CSS:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#left {
    display:inline;
    float:left;
    width:29%;
    margin: 0 0 0 10px;
    }
#center {
    float:left;
    width:29%;
    margin: 0 0 0 10px;
    }
#right {
    float:left;
    width:29%;
    margin: 0 0 0 10px;
}
#send {
    float:left;
    width:9%;
    margin: 55px 0 0 15px;
}
#nome {
	font: inherit;
	font-size: 16px;
	margin-top: 10px;
	color: #ffffff;
}
#fone {
	font: inherit;
	font-size: 16px;
	margin-top: 10px;
	color: #ffffff;
}
#mail {
	font: inherit;
	font-size: 16px;
	margin-top: 10px;
	color: #ffffff;
} 

form header {
  margin: 0px;
  background: #373737;
}
form header h4 {
  margin:0px 0px 0px 30px;
  color:#8d609e;
}

form > div {
  clear: both;
  overflow: hidden;
  margin: 0 0 0 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#8D609E), to(#373737)) repeat-X;
}

form > div > label{
  width: 100%;
  float: left;
  padding-right: 5px;
}

input[type=text]{
  width: 100%;
}

Alguém ??