bootstrap mobile text out of screen - html

Question

I was working on a landing page when I try to shrink my page everything works fine beside the header file the text goes off the screen. I wonder if somebody can inlight on this problem.
I haven't use any js code yet.
.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>
<!--Nav 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>

Answer 1

I fix the problem by adding max width of 500px and then change font-size to 0.9rem.
#media screen and (max-width : 500px) {
.HeaderP{
display: flex;
align-items: center;
font-size: 0.9rem;
}
}