Div si sovrappongono ingrandendo la pagina

[Vitto97]

Ho una pagina a colonna singola con header, contenuti e footer. Nel momento in cui ingrandisco con lo zoom però i div si sovrappongono. Dov'è il problema?

body {
	width: 1000px;
	margin: 0 auto 0 auto;
	padding: 0px;
	border: none;
	background-image: url('http://www.byte-company.com/sfondo02.jpg');
	-moz-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
	}

#header {
	font-family: 'Bad Script', cursive;
	height: 23%;
	text-align: center;
	color: white;
	background: #0000FF;
	padding: 0.3%;
	margin: 0 auto 0 auto;
	border: none;
	
	}
#content {
	font-family: 'Patrick Hand', cursive;
	height: 60%;
	background: #0000FF;
	padding: 5%;
	font-size: 24pt;
	color: white;
	position: static;
	}
#footer {
	font-family: 'News Cycle', cursive;
	height: 5%;
	background: #0000FF;
	border: none;
	padding: 0.5%;
	text-align: center;
	margin: 0 auto 0 auto;
	color: white;
	position: static;
	}