hi I have two container divs one of them has a div with an image background and i think this is the div that is causing problem. I tried removing both container divs and the gap was still here. there are no margins no paddings, and i know it is not the image that has this line its not there when i open it in photoshop. I am also using css reset

Where is this space coming from?

css

.container{
    width:100%;
}
.container2{
    width:100%;
}
.first-image{
    width:1430px;
    height:497px;
    background-image:url('../images/introimg.jpg');
    background-repeat:no-repeat;
    background-size: 100%;
    border:none;
}
.jamey{
    width:35%;

}
 .second-image{
    width:1430px;
    height:430px;
    background-image:url('../images/secondimg.jpg');
    background-repeat:no-repeat;
    background-size: 100%;


}

html

<div class="container">
        <div class="wrapper">
            <div id="overlay"></div>
            <div class="first-image">
                <div class="jamey">


                    <p class="def">
                        JAMEY
                    </p>
                    <p class="rip-date">03.02.1997 - 09.18.2011</p>
                    <p class="def2">Anonymous hate messages were posted on his Formspring account including one that claimed:</p>
                </div>
            </div>
        </div>
    </div>
    <div class="container2">
        <div class="intro-div">
            <div class="end-hate">
                <h1>PUT AN END TO HATE.</h1>
                <p>
                    ANYTHING WRITTEN ONLINE can become viral 
                </p>
                <p>
                    We believe that the way we behave online should be no different from the way that we behave in
                </p>
                <button type="button">JOIN CAMPAIGN</button>
            </div>
        </div>