Sections overlapping Bootstrap 4 - html

Question

I have a problem with two sections of my website, up to a certain size they are separated
but in the smallest size they overlap
Here is part of my code:
.home-inner {
height: 100vh;
width: 100vw;
background-image: url('../img/bg.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;}
.caption {
width: 100%;
max-width: 100%;
position: absolute;
top: 38%;
z-index: 1;
text-transform: uppercase;}
<section id="inicio">
<div class="landing">
<div class="home-wrap">
<div class="home-inner">
</div>
</div>
</div>
<div class="caption text-center">
<h1>Title</h1>
<h3>Sub title</h3>
VER PRODUCTOS
</div>
</div>
</section>
<section class="qsomos">
<div id="bio" class="container-fluid">
<div class="row justify-content-center align-items-center">
<div class="col-lg-5 col-xs-3 mx-auto">
<h2>TÍTULO</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. <br>Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>..........
In the images you can see what I mean, I'm a beginner so I'm grateful that someone can help me with something this simple.

Answer 1

What you'll need to do is add media queries to your CSS. Media queries can alter your CSS based on the screen size/device so that when the screen size is smaller your HTML will adjust to the screen size.
Take a look at this for further reference:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp