Stylization form

Question

Good afternoon,

I want to leave the form the way it is in the image, and when I use form within form when setting the part of the backend does not work. I tried to modify the internal form with div to be able to do the alignment being that it is not the same.

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

.container {
	width: 960px;
	margin: 0 auto;
	padding: 0px;
	position: relative;
}

.container:after, .container:before {
	content: " ";
	display: table;
}

.container:after {
	clear: both;
}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-1-3 {
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}

.grid-1 	{width: 40px;}
.grid-2 	{width: 100px;}
.grid-3 	{width: 160px;}
.grid-4 	{width: 220px;}
.grid-5 	{width: 280px;}
.grid-6 	{width: 340px;}
.grid-7 	{width: 400px;}
.grid-8 	{width: 460px;}
.grid-9 	{width: 520px;}
.grid-10 	{width: 580px;}
.grid-11 	{width: 640px;}
.grid-12 	{width: 700px;}
.grid-13 	{width: 760px;}
.grid-14 	{width: 820px;}
.grid-15 	{width: 880px;}
.grid-16 	{width: 940px;}
.grid-1-3	{width: 300px;}

@media only screen and (min-width: 788px) and (max-width: 979px) {
	.container {
	width: 768px;
}
	
.grid-1 	{width: 28px;}
.grid-2 	{width: 76px;}
.grid-3 	{width: 124px;}
.grid-4 	{width: 172px;}
.grid-5 	{width: 220px;}
.grid-6 	{width: 268px;}
.grid-7 	{width: 316px;}
.grid-8 	{width: 364px;}
.grid-9 	{width: 412px;}
.grid-10 	{width: 460px;}
.grid-11 	{width: 508px;}
.grid-12 	{width: 556px;}
.grid-13 	{width: 604px;}
.grid-14 	{width: 652px;}
.grid-15 	{width: 700px;}
.grid-16 	{width: 748px;}
.grid-1-3	{width: 236px;}

}


@media only screen and (max-width: 787px) {
	.container {
	width: 300px;
}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-1-3 {
	width: 300px;
	margin: 0 0 20px 0;
	float: none;
}

} 

.tipo-de-servico select {
	display: block;
	font-size: 18px;
	line-height: 25px;
	margin-bottom: 4px;
	width: 100%;
	height: 30px;
	font-size: 20px;
	background: #f2f2f3;
	outline: none;
}

.contato_form {
	padding-right: 20px;
}

.contato_form label {
	display: block;
	font-size: 18px;
	line-height: 25px;
	margin-bottom: 4px;
}

.contato_form input{
	display: block;
	width: 100%;
	border: 4px solid #c0c0c0;
	background: none;
	padding: 7px 10px;
	margin-bottom: 10px;
	outline: none;
	font-size: 14px;
	font-family: Georgia, "Times New Roman", serif 
}

.form_right {
	margin-top: 14px;
}

.form_right label {
	display: block;
	font-size: 18px;
	line-height: 25px;
	margin-bottom: 4px;
}

.form_right input{
	display: block;
	width: 50%;
	border: 4px solid #c0c0c0;
	background: none;
	padding: 7px 10px;
	margin-bottom: 10px;
	outline: none;
	font-size: 14px;
	font-family: Georgia, "Times New Roman", serif 
}

.form_textarea textarea {
	display: block;
	width: 100%;
	height: 120px;
	border: 4px solid #c0c0c0;
	background: none;
	padding: 7px 10px;
	margin-bottom: 20px;
	outline: none;
	font-size: 14px;
	font-family: Georgia, "Times New Roman", serif 
}

.form_textarea label {
	display: block;
	font-size: 18px;
	line-height: 25px;
	margin-bottom: 4px;
}

#orcamento .btn {
	text-align: center;	
	margin-bottom: 20px;
	outline: none;
}

<section id="orcamento">
				<div class="container">
					<h1 class="titulo">Orçamento</h1>
					
					<form action="" class="contato_form grid-8">
						<label for="nome">Nome *</label>
						<input type="text" id="nome">
						
						<label for="email">E-mail *</label>
						<input type="text" id="email">
	
						<label for="tel">Telefone</label>
						<input type="text" id="tel">
	
						<label for="tel">Celular *</label>
						<input type="text" id="cel">
	
						<label for="tel">Endereço com número do prédio</label>
						<input type="text" id="endereco">					
					</form>
					
					<form action="" class="contato_form grid-8">
						<div class="tipo-de-servico">
							<label for="">Tipo de serviço *</label>
							<select name="" id="">
								<option value="" disabled selected>Selecione</option>
								<option value="">Autovistoria Predial</option>
								<option value="">Laudo Técnico</option>
								<option value="">Laudo Técnico de Recebimento de Obra</option>
								<option value="">Laudo Técnico de Reforma</option>
								<option value="">Laudo Técnico de Vizinhança</option>
								<option value="">Laudo Técnico de Edifício em Garantia</option>
								<option value="">Vistoria Locativa</option>
							</select>
						</div>
					</form>
	
					<form action="" class="form_right grid-8">
							<label for="">Nº de andares</label>
							<input type="text" id="numeroAndares">
	
							<label for="">Nº de aptos ou salas</label>
							<input type="text" id="numeroAptoOuSalas">
	
							<label for="">Nº de elevadores</label>
							<input type="text" id="numeroElevadores">
	
							<label for="">Idade do prédio</label>
							<input type="text" id="idadePredio">
					</form>
					<form class="form_textarea grid-16">
						<label for="detalhe">Detalhe sua solicitação</label>
						<textarea id="detalhe"></textarea>
					</form>
					<button type="submit" class="btn grid-4">Enviar</button>	
				</div>	
			</section>