css 
 body { 
 margin: 0; 
} 
.container { 
 width: 800px; 
 height: auto; 
 margin: auto; 
 margin-top: 0px; 
 margin-bottom: 0px; 
 background-color: none; 
} 
.header { 
 height: 80px; 
 background-color: grey; 
} 
.menu { 
 height: 80px; 
 background-color: nonde; 
} 
.navigation { 
 width: 20%; 
 height: 500px; 
 background-color: none; 
 float: left; 
} 
.mainbody { 
 width: 100%; 
 height: 500px; 
 background-color: none; 
 float: center; 
} 
.footer { 
 height: 60px; 
 background-color: grey; 
 clear: both; 
} 

#nav { 
    width:750px; 
    margin:0 auto; 
    list-style:none; 
    } 
    #nav li { 
    float:left; 
    } 
    #nav a { 
    display:block; 
    text-align:center; 
    width:150px; /* fixed width */ 
    text-decoration:none; 
    } 
    
    #menuBackground { 
        background:none; 
        width:100%; 
        height:50px; 
        text-align: center; 
    } 
    #menuContainer { 
        text-align: center; 
    } 
    /*Strip the ul of padding and list styling*/ 
    ul { 
        list-style-type:none; 
        margin:0; 
        padding:0; 
    } 
    
    /*Create a horizontal list with spacing*/ 
    li { 
        display:inline-block; 
        vertical-align: top; 
        margin-right:1px; 
    } 
    
    /*Style for menu links*/ 
    li a { 
        display:block; 
        min-width:140px; 
        height:50px; 
        text-align:center; 
        line-height:50px; 
        font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; 
        color:#f2571a; 
        background:none; 
        text-decoration:none; 
        font-size: 1rem; 
    } 
    
    /*Hover state for top level links*/ 
    li:hover a { 
        background:none 
    } 
    
    /*Style for dropdown links*/ 
    li:hover ul a { 
        background:#f3f3f3; 
        color:#2f3036; 
        height:40px; 
        line-height:40px 
    } 
    
    /*Hover state for dropdown links*/ 
    li:hover ul a:hover { 
        background:#19c589; 
        color:#fff 
    } 
    
    /*Hide dropdown links until they are needed*/ 
    li ul { 
        position: absolute; 
        display:none 
    } 
    
    /*Make dropdown links vertical*/ 
    li ul li { 
        display:block; 
    } 
    
    /*Prevent text wrapping*/ 
    li ul li a { 
        width:auto; 
        min-width:100px; 
        padding:0 20px 
    } 
    
    /*Display the dropdown on hover*/ 
    ul li a:hover + .hidden,.hidden:hover { 
        display:block 
    } 
    
    /*Style 'show menu' label button and hide it by default*/ 
    .show-menu { 
        font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; 
        text-decoration:none; 
        color:#fff; 
        background:#19c589; 
        text-align:center; 
        padding:16px 0; 
        display:none; 
        width:100%!important 
    } 
    
    /*Hide checkbox*/ 
    input[type=checkbox] { 
        display:none 
    } 
    
    /*Show menu when invisible checkbox is checked*/ 
    input[type=checkbox]:checked ~ #menu { 
        display:block; 
        margin:0 auto 
    } 
    
    /*Responsive Styles*/ 
    @media screen and (max-width : 760px) { 
        /*Make dropdown links appear inline*/ 
        ul { 
            position:static; 
            display:none; 
            white-space: initial; 
        } 
    
        /*Create vertical spacing*/ 
        li { 
            margin-bottom:1px 
        } 
    
        /*Make all menu links full width*/ 
        ul li,li a { 
            width:100% 
        } 
    
        /*Display 'show menu' link*/ 
        .show-menu { 
            display:block 
        } 
    } 

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and 
(max-device-width : 480px) { 

 .container { 
  margin-top: 20px; 
  margin-bottom: 20px; 

 } 
 .header { 
  height: 80px; 
  width: 100%; 
 } 
 .menu { 
  height: 30px; 
  width: 100%; 
 } 
 .navigation { 
  width: 100%; 
  height: 80px; 
 } 
 .mainbody { 
  width: 100%; 
  height: 300px; 
 } 
 .footer { 
  width: 100%; 
  height: 60px; 
 } 

}