div saindo fora do lugar

O meu problema é o seguinte, tenho um form com 5 campos, e os input estão dentro de div's, ate ai tudo bem, o problema acontence quando o usuário envia uma mensagem, quando aparece a mensagem de erro ou de sucesso as div's que seguram os input's saem fora do lugar, alguém sabe o porque ? aqui está um pedaço do meu código, para mais detalhes aqui está o link do meu site https://www.caminhocomjesuscristo.000webhostapp.com/contato.php

<style type="text/css">
 .amarra_input{
	margin: 0 0 15px 0;
	width: 100%;
	height: 30px;
}
	.amarra_input ul li .input{
 float: left;
 margin: 0 5px 0 0;
 width: 195px;
 height: 27px;
 border: 2px solid #d8d8d8;
 background: #ebebeb;
	}
 .amarra_input ul li:last-child .input{
 margin: 0;
 }
 .amarra_input ul li .input label, .innput label, .label_msg{
 float: left;
 padding-left: 5px;
 padding-right: 5px;
 height: 27px;
 line-height: 27px;
 font-size: 12px;
 background: #ccc;
 }
 .label_msg{
 width: 390px;
 }
 .amarra_input ul li .input label strong, .innput label strong{
 color: red;
 }
	.innput{
 margin: 0 0 15px 0;
 width: 399px;
 height: 27px;
 border: 2px solid #d8d8d8;
 background: #ebebeb;
	}
	.msg{
 height: 120px;
	}
.mensagem{
	font-size: 10px;
	color: red;
}
.txt_nome{
	float: right;
	width: 139px;
}
.txt_sobrenome{
	float: right;
	width: 117px;
}
.txt_email{
	float: right;
	width: 345px;
}
.txt_assunto{
	float: right;
	width: 332px;
}
.txt_mensagem{
	padding-top: 5px;
	width: 395px;
	height: 88px;
	font-family: arial;
}

.bt_padrao{
	width: 403px;
	height: 40px;
	font-weight: bold;
	color: #6e6e6e;
	background: #ccc;
}
	.bt_padrao:hover{
 color: #ccc;
 background: #6e6e6e;
	}
</style>

<form id="formulario" action="javascript:func()" method="post" autocomplete="off">
 <div class="amarra_input">
 <ul>
 <li><div class="input">
 <label for="nome">Nome <strong>*</strong></label>
 <input type="text" name="nome" id="nome" class="txt txt_nome" onFocus="javascript:toggleMsg('mensagem-1')" onBlur="javascript:toggleMsg('mensagem-1')" />
 <span id="mensagem-1" class="mensagem" style="visibility:hidden;">O nome é obrigatório</span>
 </div></li>
 <li><div class="input">
 <label for="sobrenome">Sobrenome</label>
 <input type="text" name="sobrenome" id="sobrenome" class="txt txt_sobrenome" onFocus="javascript:toggleMsg('mensagem-2')" onBlur="javascript:toggleMsg('mensagem-2')" />
 <span id="mensagem-2" class="mensagem" style="visibility:hidden;">O sobrenome é opcional</span>
 </div></li>
 </ul>
 </div>
 <div class="innput">
 <label for="email">Email <strong>*</strong></label>
 <input type="text" name="email" id="email" class="txt txt_email" onFocus="javascript:toggleMsg('mensagem-4')" onBlur="javascript:toggleMsg('mensagem-4')" />
 <span id="mensagem-4" class="mensagem" style="visibility:hidden;">O email é obrigatório</span>
 </div>
 <div class="innput">
 <label for="assunto">Assunto <strong>*</strong></label>
 <input type="text" name="assunto" id="assunto" class="txt txt_assunto" onFocus="javascript:toggleMsg('mensagem-3')" onBlur="javascript:toggleMsg('mensagem-3')" />
 <span id="mensagem-3" class="mensagem" style="visibility:hidden;">O assunto é obrigatório</span>
 </div>
 <div class="innput msg">
 <label for="mensagem" class="label_msg">Mensagem <strong>*</strong></label>
 <textarea type="text" name="mensagem" id="mensagem" class="txt txt_mensagem" onFocus="javascript:toggleMsg('mensagem-5')" onBlur="javascript:toggleMsg('mensagem-5')"></textarea>
 <span id="mensagem-5" class="mensagem" style="visibility:hidden;">A mensagem é obrigatória</span>
 </div>
 <input type="submit" class="bt bt_padrao" value="ENVIAR MINHA MENSAGEM"/>
 </form>