Formulaire contact css

bonjour

je suis en train de realiser un formulaire contact et je n'arrive pas a positionner les labels à cotés des champs à remplir... J'ai le "nom" puis en dessous le champ a remplir il n'est pas sur la meme ligne.
du coup le contact est dessous du formulaire alors qu'il était en haut à droite et la map a disparu

 <section>
                    <p>Contactez-nous à l'aide du formulaire ci-dessous:</p>
                    <form name="formulaireContact" action="" method="POST" enctype="multipart/form-data">
                        <ul>
                            <li><label for="nom">Nom* :</label><input id="nom" name="nom" type="text" autofocus placeholder="Votre nom"/><span class="error">Champ invalide</span></li>
                            <li><label for="prenom">Prénom :</label><input id="prenom" name="prenom" type="text" placeholder="Votre prénom" /><span class="error">Champ invalide</span></li>
                            <li><label>Sexe :</label><input type="radio" id="homme" name="sexe" value="homme" class="radio" /><label for="homme" class="radioLabel">Homme</label><input type="radio" id="femme" value="femme" name="sexe" class="radio" /><label class="radioLabel" for="femme">Femme</label><input id="et" value="et" type="radio" name="sexe" class="radio" /><label class="radioLabel" for="et">Extra-terrestre</label></li>
                            <li><label for="tel">Tél:</label><input id="tel" name="tel" type="text" placeholder="0123456789" maxlength="10" /><span class="error">Champ invalide</span></li>
                            <li><label for="mail">E-mail* :</label><input id="mail" name="mail" type="mail" placeholder="truc@machin.fr" /><span class="error">Champ invalide</span></li>
                            <li><label for="date">Date :</label><input id="date" name="date" type="date" /></li>
                            <li id="pj"><label for="piece">Pièce jointe :</label><input id="piece" name="pj" type="file" /></li>
                            <li><label for="mess">Votre message :</label><textarea id="mess" name="mess" rows="10" cols="30"></textarea></li>
                            <li><label></label><input type="reset" /> <input type="submit" id="envoi" /></li>
                        </ul>
                    </form>
                </section>
                
                <div class="dv-5 top40">
                   <h1>Contactez-nous:</h1>
      <h2>Tél: 01 02 03 04 05</h2>
      <h2>Rue du cosmos 44049 Triton</h2>
                </div>  
                
      <div class="frame">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d167998.10803373056!2d2.2069770643680573!3d48.85877410312378!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C+France!5e0!3m2!1sfr!2sdz!4v1516099772287" frameborder="0" style="border:0" allowfullscreen></iframe>
      
                    </div>
            
			</main>
		</div>

/*contact*/
    
 .error {
    color:red;
    font-size: 0.8em;
    display: none;
}
.aside{
padding-top:2em;
	cursor:pointer;
	position:relative;
	overflow:hidden;
	text-align:center;
	height:400px;
	-webkit-animation: apparition 1s;
	animation: apparition 1s;	
	
}
.frame{
	width:100%;
	height:200px;
	position:absolute;
	left:105%;
	-webkit-transition: left 0.8s;
	transition: left 0.8s;
}
@-webkit-keyframes apparition{
	from{
		-webkit-transform:rotate(0) scale(0);
		transform:rotate(0) scale(0);
	}
	to{
		-webkit-transform:rotate(360deg) scale(1);
		transform:rotate(360deg) scale(1);
	}	
}
@keyframes apparition{
	from{
		-ms-transform:rotate(0) scale(0);
		-webkit-transform:rotate(0) scale(0);
		transform:rotate(0) scale(0);
	}
	to{
		-ms-transform:rotate(360deg) scale(1);
		-webkit-transform:rotate(360deg) scale(1);
		transform:rotate(360deg) scale(1);
	}	
}
.aside:hover .frame{
	left:50;
}
    
    
.frame {
	width:100%;
	height:150px;	
	margin:40%;
}
.frame2 {
	width:100%;
	height:250px;
}
.top30{
	margin-top:30px;
}
.top40{
	margin-top:40px;
}

section{
	padding-top:5em;
	box-shadow:0 0 0;
	float:left;
	border:none;
	padding-top:2em;
	padding-left:0;
    width: 100%;
}
form{
	width:25%; /*  largeur */
   height:50px; /*  hauteur */
   margin-left:170px; /* -largeur/2 */
   margin-top:80px
	text-align:left;
  padding: 15px;
	}
ul{
	list-style-type:none;
}
label:not(.radioLabel){
	display:inline-block;
	width:30%;
    padding: -15px;
  
}

input{
	outline:0;
	-webkit-transition:all 1s;
	transition: all 1s;
	border:none;
	border-radius:5px;
}

input:focus, textarea:focus{
	background:grey;
	color:#fff;
}
textarea{
	border-radius:5px;
	outline:0;
	transition: all 1s;
	-webkit-transition:all 1s;
}
@media screen and (max-width: 600px){
form{
	width:96%;
	font-size:0.7em;
	float:none;
    
}
label{
	display:block;
	width:150px;	
     vertical-align:top;
    
    
   } 
    
#pj{
	display:none;
}
input[type="text"], input[type="tel"], input[type="email"], textarea{
	width:100%;
	margin-bottom:0.5em;
}
#asideContact{
	width:96%;
	float:none;
}
#frame{left:0;}
}

merci de votre aide