i am creating a Responsive webpage. its structure is as follows:

<body>
<div class="page">

<div class="header">
</div>

<div class="content">
</div>

<div class="footer">
</div>

</div><!--page ends-->

</body>


when i give div header a margin-top:10px then the div page also moves along with it. also i am not able to provide margin-top:1000px to div content. please help. html and css coding i am going to provide you below.

Code:
@charset "utf-8";
/* CSS Document */



/*---------------------------Reset Begins---------------------------------*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, hgroup,
menu, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;

}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
hgroup, menu, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/*-------------------------------------Reset Ends------------------------------------------*/












h1{
font-size:1.5em;	
}

h2{
font-size:1.4em;	
}

h3{
font-size:1.3em;	
}

body{
margin:0;
padding:0;	
position:relative;
}

.page{
	margin:0;
	padding:0;
width:100%;
height:auto;
background-color:#993;
position:relative;
top:0px!important;
}


.header,.content,.footer{
margin:auto;
width:80%;
clear:both;
position:relative;
}




.logo{
background-color:#CC3300;
width:30%;	
float:left;
clear:both;
}

.page .header .logo img{
width:80%;
max-width:80%;
margin:5% 10%;	
}

.header{
margin-top:0px;	
}


.content{
margin-top:1000px;	
}


.nav{
background-color:#CC3300;
width:70%;
float:left;	
clear:right;
height:70px;
}

.nav ul{	
width:100%;
}

.nav ul li{
	float:left;
display:inline-block;
width:22%;
overflow:hidden;
margin: 0 2% 0 0;
padding:0 0 0 0;
}

.nav ul li a{
	display:block;
	min-height:45px;
	height:auto;
background-color:#69C;
padding:25px 0 0 20%;
text-decoration:none;

}



.nav ul li a:hover{
background-color:#000;;
}



Code:
<!DOCTYPE html>

<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>

<meta charset="utf-8" />

<title>ROBOT…OR NOT?</title>

<meta name="DC.creator" content="Ethan Marcotte - http://unstoppablerobotninja.com" />
<meta name="robots" content="index, follow" />
<meta name="description" content="A demonstration site for Ethan Marcotte's book, RESPONSIVE WEB DESIGN" /> 
<meta name="keywords" content="responsive, responsive design, responsive web design, css, fluid grids, media queries, ethan, ethan marcotte, lol keywords lol" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="stylesheet.css" media="screen, projection" />
<!--
<script src="http://use.typekit.com/daz7uli.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script src="-/js/respond.js"></script>
-->
</head>

<body>

<div class="page">

<div class="header">

<div class="logo">

<!--<div class="outer_logobox"> -->
<img src="img/logo.png" />
<!--
</div>outer logo box ends-->

</div><!--logo ends-->


<div class="nav">
<ul>
			<li id="nav-blog"><a href="#">The ’Bot Blog</a></li>
			<li id="nav-rated"><a href="#">Top Rated</a></li>
			<li id="nav-droids"><a href="#">Droids of the Day</a></li>
			<li id="nav-contact"><a href="#">Contact Us</a></li>
</ul><!-- /end ul#nav-primary.nav -->
</div><!--nav ends-->

</div><!--header Ends-->

<div class="content">
<div class="about">

<div class="headingabout">
Recently in The Bot Blog
</div><!--headingabout ends-->

<div class="datebox">
<h1>10</h1> <h2>october</h2>
</div><!--date ends-->


<div class="contentabout">
“KILL ALL HUMANS?” BUT WHY?

Somewhere in my stomach I felt a cold, hard knot. Take stainless steel alloyed with titanium and plate it with three inches of lead. Take a brain made up of super-charged magnetic crystals enclosed in a leaden cranium and shielded by alloy steel. A bullet wouldn’t pierce it; radiations wouldn’t derange it; an axe wouldn’t break it.


</div><!--contentabout ends-->

<div class="postedby">
</div><!--postedby ends-->

<div class="recententries">
</div><!--recententries ends-->


</div><!--about ends-->


<div class="robot">
<div class="robotimg">
<img src="img/robot.jpg" />
</div><!--robotimg ends-->

<div class="robotheading">
YOU CAN NEVER BE TOO SURE.
</div><!--robotheading ends-->

<div class="robotcontent">
Never wonder again if your new potted plant is secretly a rampaging killbot, beeping away maliciously into the night. Stop worrying whether that “android” you bought is actually a toaster with pipe cleaners taped to its sides.

Welcome to ROBOT OR NOT. We answer these questions so you don’t have to.
</div><!--robotcontent ends-->

</div><!--robot ends-->


<div class="gallery">

<div class="galleryheading">

</div><!--galleryheading ends-->

<div class="gallerybots">
</div><!--gallerybots ends-->

<div class="gallerynots">
</div><!--gallerynots ends-->




</div><!--gallery ends-->


</div><!--content Ends-->

<div class="footer">

<div class="footerinfo">

</div><!--footerinfo ends-->

</div><!--footer ends-->


</div><!--Page ends-->






</body>
</html>