Огромный разрыв над div при позиционировании поверх другого div ⇐ CSS

[Anonymous]

Мне удалось разместить div поверх другого div. Однако я не знаю, почему у меня сверху образовался пробел.
Смотрите скриншот:


между облачным небом вверху и нижней синей частью.
Вот CSS:

Код: Выделить всё

/*
* Hero section
*/

.hero-section .section-content {
position: relative;
top: 70px;
}

.hero-section .section-content h2 {
font-size: 30px;
}

.hero-section .section-content .btn-primary {
margin-right: 1px;
}
.sunny {
width:200px; /*width of your image*/
height:200px; /*height of your image*/
background: transparent url("img/sunny.png") bottom right no-repeat;
border: 2px solid #000;
margin:0; /* If you want no margin */
padding:0; /*if your want to padding */
}

.weather-icon-pos{
display: inline-block;
position:relative;
top:95px;
width:75%;
}

Полный код см. на GitHub.

Подробнее здесь: https://stackoverflow.com/questions/459 ... nother-div