There is a large 'white-space' between my 'DIV: IMAGE' and 'DIV: SLIDER' that I cannot account for. I cannot see that I have coded a margin between the two elements and no matter what I seem to do to my stylesheet, I cannot remove it.
What part of the code is causing this? And what clean solutions are there? Many Thanks.
.wrap {
margin: 0px auto;
width: 80%;
margin-top: 10px;
padding: 3em 0em;
position: relative;
color: #FFF;
}
.image {
background-image: url("http://www.thestrandnyc.com/d/main/media/Destination/__thumbs_1200_700_crop/NY_City.jpg");
background-size: 110% 100%;
padding: 0px 0px 210px 0px;
border: 1px solid red;
}
.slider {
padding: 2em 0em;
background-color: #F4F4F4;
position: relative;
height: 200px;
margin: 0px auto;
border: 1px solid red;
}
.slider p:first-child {
color: #fff;
background: #35AFBA;
font-size: 2.8em;
font-weight: 900;
border-radius: 100%;
width: 200px;
height: 200px;
display: inline-block;
vertical-align: middle;
text-align: center;
line-height: 200px;
margin: 0em 0em 0em 1.2em;
position: absolute;
}
.slider p:nth-child(2) {
color: #ff605f;
text-shadow: 0px 0px 2px #ff605f;
background: rgba(230, 231, 231, 0.56);
font-size: 2.8em;
font-weight: 900;
border-radius: 100%;
width: 200px;
height: 200px;
display: inline-block;
text-align: center;
line-height: 200px;
margin: 0em 0em 0em 4.5em;
position: absolute;
}<body>
<div class="image">
<div class="wrap">
<div class="nav">
<h1>Resume</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</div>
<div class="me">
<h2>Andrew Hardiman</h2>
<p>Webdesigner & Developer</p>
<p>Read More</p>
</div>
</div>
</div>
<div class="wrap">
<div class="slider">
<p>HTML</P>
<p>css</P>
<h3>I design and develop amazing websites that are sleek, easy-to-navigate and exiting to use.</h3>
<p>Work with us to plan your digital marketing mix and achieve better results online.</p>
</div>
</div>
div.slideris insidediv.wrap, which has amargin-topand apadding. They cause the gap, and removing them will solve that.