Width property of header and footer is missing.

Working fiddle.

.header{
position: fixed;
top: 0;
background-color: #f00;
height: 100px;
width: 100%;
}
.main{
background-color: #ff0;
height: 700px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;
width: 100%;
}