As I was working on designing a landing page, I encountered an issue with the header file. When trying to shrink the page, the text in the header went off-screen while everything else seemed to work fine. I am hoping someone can shed some light on this problem.
So far, I have not used any JavaScript code.
.stage {
background: url(img/Header/living-room-1517166_1920.jpg) center center no-repeat;
background-size: cover;
color: white;
height: 100%;
width: 100%;
display: flex;
align-items: center;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!--Navigation bar-->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top navbar-fixed-top">
<a class="navbar-brand" href="#">Wijkveiligheid</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Thuis <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Promo video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Vergelijk</a>
</li>
<li class="nav-item">
<a class="btn btn_primary" href="#">Login</a>
</li>
</ul>
</div>
</nav>
<div class="stage" id="stage">
<div id="stage-caption">
<h1 class="display-3">Uw veiligheid is onze prioriteit</h1>
<p class="HeaderP">Wij van wijkveiligheid kijken altijd hoe we het woongenot van onze medemens kunnen verbeteren en optimaliseren. Onze professionele adviseurs staan klaar om samen met u te kijken hoe uw huis ook optimaal beveiligd kan worden en klaar is voor de toekomst.</p>
</div>
</div>