enter image description here

enter image description here

Help, there is such a void between the blocks, I found a similar topic on the forum, but before trying to try the masorny plugin I would like to know if anyone knows how to fix it.

.contacts_with_map { width: 100%; height: 600px; background-image: url(../img/map.jpg); border-top: 1px solid #fff; position: relative; display: block; top: -175px; border-bottom: 10px solid green; } .map_cover { float: right; display: block; top: -110px; position: relative; } .contactsForm { position: relative; width: 360px; height: 423px; left: 47.7%; top: -25px; margin-left: 260px; margin-top: 110px; display: block; border-radius: 10px; background-color: #fff; } input[type=text] { width: 330px; height: 42px; padding: 8px 20px; margin: 5px 25px 8px 15px; display: inline-block; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 16px; } input[type=submit] { width: 330px; height: 50px; margin: 5px 25px 8px 15px; border: none; border-radius: 6px; cursor: pointer; background-color: #ffad1e; font-family: 'Lobster', cursive; font-size: 26px; color: #fff; } .contactsForm_ftext1 { text-align: center; padding: 33px 15px 0px 15px; display: block; font-family: 'Open Sans', sans-serif; font-size: 30px; font-weight: 600; } .contactsForm_ftext2 { text-align: center; display: block; line-height: 1.5; padding: 15px 25px 20px 24px; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 300; } .clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .footer { background-color: #222222; width: 100%; height: 200px; display: block; position: relative; border: 10px solid green; /*top: -300px;*/ } 
 <div class="contacts_with_map"> <div> <div class="map_cover"><img src="img/map_cover.jpg" /></div> <form class="contactsForm"> <span class="contactsForm_ftext1">Остались вопросы?</span> <span class="contactsForm_ftext2">Заполните форму ниже и наши менеджеры свяжутся с Вами!</span> <input type="text" name="name" placeholder="Ваше имя*"> <br> <input type="text" name="phone_number" placeholder="Ваш телефон*"> <br> <input type="text" name="email" placeholder="Ваш e-mail*"> <br> <input type="submit" name="submit" value="Отправить"> </form> </div> </div> <div class="clearfix"></div> <div class="footer"> <div class="div_num"> <span class="call_now_text">Звоните прямо сейчас:</span> <div class="phone_numbers"> <span class="nums_1">+38 (048) 965 32 45 <br> +38 (099) 256 75 32</span> <span class="nums_2">+38 (048) 965 32 45 <br> +38 (099) 256 75 32</span> </div> </div> <!-- <div class="footer_logo"><img src="img/footer_logo.png"></div> <div class="footer_copywrite"><span> © 2016 Кровля профи. Все права защищены. Сайт разработан: AVADA-MEDIA</span></div> --> </div> 

    2 answers 2

    You yourself indicated in the selector:

     .contacts_with_map{ top: -175px; } 

      The problem here is .contacts_with_map you have given top: -175px;