html - Three extra pixels at the bottom of the page unaccounted for and not sure how to get rid of them? -

i'm working on building responsive website , have run issue where, upon scrolling, there looks 2 or 3 pixels @ bottom of page beyond content.

i'm not sure they're coming or how rid of them. appear inside of overall container outside of header , content blocks. i'm assuming it's kind of margin issue?

any assistance appreciated!

js fiddle here: http://jsfiddle.net/bramvanroy/toxk8lde/1/

html

<div id="container">     <div id="header">         <div id="headerleft">             <div id="logo">                 <img src="http://mbeach.me/arch/images/layout/logo_100.png" alt="miles arch logo" id="miles_arch_logo" />             </div>             <div id="companyname">                 <span id="miles_arch">miles architecture group</span>             </div>         </div>         <div id="headerright">             <div id="navmenu">                 <img src="http://mbeach.me/arch/images/layout/menu_button.png" id="nav_menu_button" alt="menu_button" />             </div>         </div>     </div>     <div id="content">         <div id="slideshow">             <img src="http://mbeach.me/arch/images/layout/main_background.jpg" alt="" />             <div id="leftright"></div>             <div id="buttons"></div>         </div>     </div> </div> 

css

html {     font-size: 100%; } body {     font-size: 1em;     background:; } #container {     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     border: 0px solid yellow; } #header {     width: 100%;     background: #fff;     border-bottom: 4px solid #ffa500;     display: inline-block; } #headerleft {     display: inherit;     padding-bottom: 26px; } #logo {     display: inherit; } #miles_arch_logo {     position: relative;     top: 15px;     margin-left: 30px;     width: 100px;     height: 101px; } #companyname {     margin-left: 92px;     margin-right: 37px;     display: inherit;     font-size: 32px;     position: relative;     top: -20px;     color: #105697;     font-family: arial, sans-serif;     letter-spacing: .05em;     /* below rescales font: first number horizontal, second vertical. */     transform: scale(1.2, .8);     /* w3c */     -webkit-transform: scale(1.2, .8);     /* safari , chrome */     -moz-transform: scale(1.2, .8);     /* firefox */     -ms-transform: scale(1.2, .8);     /* ie 9 */     -o-transform: scale(1.2, .8);     /* opera */ } #headerright {     display: inherit; } #navmenu {     width: 50px;     height: 41px;     position: absolute;     right: 44px;     top: 44px; } #nav_menu_button {     width: 50px;     height: 41px; } #content {     width: 100%;     max-width: 100%;     position: absolute;     top: 136px;     bottom: 0px;     border-bottom: 0px solid yellow;     margin: 0;     padding: 0; } #slideshow {     overflow: hidden; } #slideshow img {     width: 100%;     /*position: relative;     margin-top: -100px;*/ } #leftright {     position: absolute;     border: 0px solid red;     top: 0px;     width: 50px;     height: 50px; } #buttons {     position: absolute;     border: 0px solid red;     top: 0px;     left: 50px;     width: 50px;     height: 50px; } /* resizes header info depending on screen size. */  @media (max-width: 1375px) {     /*#slideshow {         height: 531px;         overflow: hidden;     }     #slideshow img {     width: 100%;     border: 0px solid red;     }*/ } @media (max-width: 800px) {     /*#slideshow {         height: 428px;         overflow: hidden;     }     #slideshow img {     width: 800px;     border: 0px solid red;     }*/     #companyname {         font-size: 22px;         margin-left: 52px;         margin-right: 37px;     }     #miles_arch_logo {         width: 70%;         height: 70%;     }     #nav_menu_button {         width: 80%;         height: 80%;     }     #content {         top: 126px;     } } @media (max-width: 700px) {     #companyname {         font-size: 18px;         margin-left: 22px;         margin-right: 37px;         top: -10px;     }     #miles_arch_logo {         width: 50%;         height: 50%;     }     #navmenu {         right: 20px;         top: 35px;     }     #nav_menu_button {         width: 60%;         height: 60%;     }     #content {         top: 99px;     } } @media (max-width: 500px) {     #companyname {         font-size: 16px;         margin-left: 22px;         margin-right: 37px;         top: 2px;     }     #miles_arch_logo {         width: 35%;         height: 35%;     }     #navmenu {         right: 8px;         top: 28px;     }     #nav_menu_button {         width: 55%;         height: 55%;     }     #content {         top: 79px;     } } @media (max-width: 425px) {     #companyname {         font-size: 12px;         margin-left: 2px;         margin-right: 37px;         top: 2px;     }     #miles_arch_logo {         width: 30%;         height: 30%;     }     #navmenu {         right: 5px;         top: 28px;     }     #nav_menu_button {         width: 50%;         height: 50%;     }     #content {         top: 72px;     } } 

set img's style include display: block; or vertical-align: middle;

http://jsfiddle.net/85a6a52t/1/ (see bottom of css panel)

#slideshow img { display: block; } 

or

#slideshow img { vertical-align: middle; } 

reference answer explains issue