title: How to fix header and footer to show properly when you change browser window size?
body: <p>If you minize your browser to smaller size, my site header and footer color 
  is erased. If you minize your browswer you will realize what do I mean.
  Here is the picture what happened to my site if you minimize the window of internet browser. It's not easy to explain, because it loads perfectly fine on maximized browser window. my site url is www.virmodrosti.com</p>
  
  <p><a href="https://i.stack.imgur.com/yBKQt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yBKQt.png" alt="enter image description here"></a></p>
  
  <p>Here is the code from style.css</p>
  
  <pre><code>#footer {
   margin: 0 auto;
   width: 100%;
   background: #0b3e61;
   color: #CCD8E4;
   padding: 12px 0;
   font-size: 12px;
  }
  
  #footer a {
   font-size:14px;
   font-weight: bold;
   color: #ABB9C7; 
   text-decoration: none;
  }
  
  #footer a:hover {
   color: #ABB9C7; 
   text-decoration: underline;
  }
  
  #header {
   background-color: #0A3952;
   padding: 4px 0 20px 0; 
  }
  
  #header .menu {
   display: inline-block;
   float: left;
   padding-top: 60px;
   font-size: 15px;
   text-transform: uppercase; 
   line-height: 40px;
  }
  
  body {
   background: #DEDEDE;
   font-family: Frutiger, Lato, Georgia, serif;
   font-size: 13px; 
  }
  
  #wrapper { 
   margin: 0 auto;
   width: 100%; 
  }
  
  #wrapper2 { 
   margin: 0 auto;
   height: 86px;
   width: 1180px; 
  }
  </code></pre>
  
  <p>Kindly let me know what do I need to change in style.css in order to show properly?</p>