Two images side by side and text on it

Question

I am trying to add images as a background and I need to write text on both. The problem which I am facing is the gap b/w two images. I don't know why it's showing me gap.

<div class='imgcontainer'>
    <div id="first"> <h4 > SYRIAN CRISIS </h4>
        <p > We are organizing a conference in April 2016 on
            water and humanitarian aspects of the Syrian crisis.
            Click <a href="projectc.html">here</a> to learn about the crisis and our
            conference.</p></div>
    <div id="second"><h2>SMALLHOLDER</h2><h3> AGRICULTURE</h3>
        <p>We are organizing a workshop in April 2016 on smallholder irrigation in Sub-Saharan Africa. Click here
            to learn about the challenge of agriculture in the
            region and our workshop.</p>
    </div>
    <div id="clear"></div>
</div>






#first {
    width: 680px;
    background: url('../images/banner-img1.jpg');
    float: left;
    background-repeat: no-repeat;
    height: 440px;
    margin: auto;
}
#second {
    width: 650px;
    float: right;
    background: url('../images/banner-img2.jpg');
    height: 440px;
    margin: auto;
    background-repeat: no-repeat;

}

Answer 1

I believe your screen is wider than 680px + 650px = 1330px

First div is aligned to the left, second one to the right, both have fixed widths.. if your browser width is > 1330px you'll have a gap between this divs

Answer 2

DEMO

CSS:

.imgcontainer {
  position: relative;
}

.right,
.left {
  width: 50%;
  position: absolute;
}

.right {
  right: 0;
}

.left {
  left: 0;
}

#first {
  width: 50%;
  position: absolute;
  background: url('../images/banner-img1.jpg');
  left: 0;
}

#second {
  width: 50%;
  position: absolute;
  background: url('../images/banner-img2.jpg');
  right: 0;
}

HTML:

<div class='imgcontainer'>
  <div id="first">
    <h4> SYRIAN CRISIS </h4>
    <p> We are organizing a conference in April 2016 on water and humanitarian aspects of the Syrian crisis. Click <a href="projectc.html">here</a> to learn about the crisis and our conference.
    </p>
  </div>
  <div id="second">
    <h2>SMALLHOLDER</h2>
    <h3> AGRICULTURE</h3>
    <p>We are organizing a workshop in April 2016 on smallholder irrigation in Sub-Saharan Africa. Click here to learn about the challenge of agriculture in the region and our workshop.</p>
  </div>
  <div id="clear"></div>
</div>