Container div larger image inside

once again hoping that you would help me.

I am new to css and trying to create something simple, but even simple is very difficult :( I have been in this problem for about an hour now.

in some way, the problem I'm currently facing is that I have a div that has an image inside, but the div has at least 5px space at the bottom that I just can't figure out how to remove.

basically this is what i have

as you see, there is a small “white” space under the image.

this is what i want (edited with paint)

Mostly I have a gray background for the body, with a wrapper inside with a width of 70%,

inside the wrapper there is a menu (a small red thing is part of this menu), then there is a background div (id = container) whos, white, width 142.8571%, and 15% on the left, so this covers the entire page. then there will be an image inside this div.

so basically the problematic div is the div with the container ID.

this is my code for the relevant part

HTML:

<div id="container">

    <img id="banner-img" src="img/banner.jpg">

</div>

CSS

#container{

    background-color: white;

    padding-bottom:0px;
    margin-bottom: 0px;
    border-bottom-width: 0px;


    width: 142.8571%;

    position:  relative;
    left: -21.428571%;




}

#banner-img{
    position: relative;
    margin: 0px auto 0px auto;
    width: 70%;
    left: 15%;
    height: auto;
    padding: 0px;
    border: 0px;
    position: relative;

}