Databases
StackOverflow2013
Postsdbo
POextremely small gap between two divs that are width 100%
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POextremely small gap between two divs that are width 100%
    text
    copied!<p>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 <img src="https://i.stack.imgur.com/39dFW.png" alt="white space"></p> <p>Where is this space coming from? </p> <p><strong>css</strong></p> <pre><code>.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%; } </code></pre> <p><strong>html</strong></p> <pre><code>&lt;div class="container"&gt; &lt;div class="wrapper"&gt; &lt;div id="overlay"&gt;&lt;/div&gt; &lt;div class="first-image"&gt; &lt;div class="jamey"&gt; &lt;p class="def"&gt; JAMEY &lt;/p&gt; &lt;p class="rip-date"&gt;03.02.1997 - 09.18.2011&lt;/p&gt; &lt;p class="def2"&gt;Anonymous hate messages were posted on his Formspring account including one that claimed:&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="container2"&gt; &lt;div class="intro-div"&gt; &lt;div class="end-hate"&gt; &lt;h1&gt;PUT AN END TO HATE.&lt;/h1&gt; &lt;p&gt; ANYTHING WRITTEN ONLINE can become viral &lt;/p&gt; &lt;p&gt; We believe that the way we behave online should be no different from the way that we behave in &lt;/p&gt; &lt;button type="button"&gt;JOIN CAMPAIGN&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload