Layout quebra em resoluções diferentes e quando aplica zoom!

Front-end
#1

Pessoal me ajudem por favor, meu site quebra quando o abro em outros computadores e quando aplico zoom na tela. Como resolver isso?

`<!DOCTYPE html>
Início 
<body>
		<!-- Logo e menus-->
		<!-- Opções de menu -->
	<div id="navegacao">
		<ul>
			<li><a href="#" class="menuini">Início</a></li>
			<li><a href="#" class="menuesc">Escritório</a>
				<ul>
					<li>Morada Nova</li>
					<li>Quixadá</li>
					<li>Crateús</li>
				</ul>
			</li>
			<li><a href="#" class="menuat">Área de atuação</a>
				<ul>
					<li>Direito Imobiliário</li>
					<li>Administrativo</li>
					<li>Previdenciário</li>
					<li>Empresarial</li>
				</ul>
			</li>
			<li><a href="#" class="menue">Equipe</a></a>
				<ul>
					<li>Advogados</li>
					<li>Estagiários</li>
				</ul>
			</li>
			<li><a href="#" class="menucp">Consulta Processual</a></li>
			<li><a href="#" class="menul">Localização</a></a>
				<ul>
					<li>Morada Nova</li>
					<li>Quixadá</li>
					<li>Crateús</li>
				</ul>
			</li>
		</ul>
	</div>
	</center>


<section>
	<hr class="hr1"> 
	<img src="site/imagens/logo.png" class="logo">
	<img src="site/imagens/partheon.png" class="partheon">
</section>

<div class="atendimento">
	<p>
		<h2>Atendimento</h2>
		Telefones: <br>
		Email: 
	</p>
</div>


<hr class="hr2">
<img src="site/imagens/rodape.png" class="rodape">

<div id="email">
<center><label style="font-size: 30px;">Contato</label>
	<form method="POST" action="enviar_email.php">
		<label>Email: </label>
		
		<input type="text" name="email" class="email" autofocus placeholder="Digite seu e-mail!"/><br>
		
		<label>Mensagem: </label>

		<input type="text" name="mensagem" placeholder="Digite sua mensagem!"><br>

		<input type="submit" value="Enviar" name="btn_enviar"/>
		<input type="reset" value="Apagar"/>
	</form>
</div>
`
#2

voce tem o site em algum lugar pra gente ver?