Я не знаком с веб-интерфейсом, поэтому испытываю небольшие затруднения при создании макета в html, css3 и bootstrap 4. Я сделал небольшую аминатонную вещь в фоновом режиме, такую как https://codepen.io/mohaiman/pen/MQqMyo и после него я пытаюсь поставить еще один div, т.е. нижний колонтитул, но он частично совпадает. Я думаю, что это проблема с позиционированием. Пожалуйста, посмотрите на прилагаемое изображение и предложите несколько ценных идей
<div class="page-header image" data-parallax="true" style="background-image: url('./assets/eCommerce_service.png');">
<div class="filter"></div>
<br>
<div class="container-home">
<div class="row">
<div class="mx-auto col-md-8 col-lg-6">
<div class="motto text-center">
<img src="assets/logo.png" class="d-block img-fluid">
</div>
</div>
<div class="mx-auto col-md-8">
<div class="motto text-center">
<h1 class="presentation-title presentation-font">WEBBNET DIGITAL</h1>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSdjOF6IWFyQxQ-n1WKfUzpyrqYN2gU4iexFAsz6gqrADIioXA/viewform"
class="btn btn-round" target="_blank"><i class="fa fa-play">
</i>Get free session</a>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="section section-about-us area">
<div class="container">
<div class="row">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="title"><strong>Kolkata's Most <span style="color:#de6b28">Trendiest</span> Agency</strong></h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-7 mx-auto">
<p>Webbnet Digital is the most creative and trendiest digital marketing agency of Kolkata. We offer some of the highest demanding motion
graphics logos, posters banners and all sorts of online promotion.
</p>
</div>
<div class="col-sm-12 col-md-3 ml-auto margin">
<img src="assets/seo_home.png" class="img-rounded img-responsive">
</div>
</div>
</div>
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
