Content goes out from bootstrap 4 template - html

Question

On mobile, the content goes out off the page, and the horizontal scrollbar shows up.
You can check my page on this link.
<div class="custom_content col-md-12">
<div class="container">
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Kezdőlap</li>
<li class="breadcrumb-item"><?php echo $pageTitle; ?></li>
</ol>
</nav>
</div>
<div class="row">
<h1 class="page_title"><?php echo $pageTitle; ?></h1>
</div>
<div class="row">
<div class="content"><?php GetContent($siteID); ?></div>
</div>
</div>
</div>

Answer 1

You required to add one additional div with class col right after the row.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom_content col-md-12">
<div class="container">
<div class="row">
<div class="col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Kezdőlap</li>
<li class="breadcrumb-item">
<a href="<?php echo $host; ?>/<?php echo $pageSeo; ?>" title="<?php echo $pageTitle; ?>">
<?php echo $pageTitle; ?>
</a>
</li>
</ol>
</nav>
</div>
</div>
<div class="row">
<div class="col-12">
<h1 class="page_title">
<?php echo $pageTitle; ?>
</h1>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="content">
<?php GetContent($siteID); ?>
</div>
</div>
</div>
</div>
</div>

Answer 2

<section class="custom_content">
<div class="container">
<div class="row">
<div class="col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Kezdőlap</li>
<li class="breadcrumb-item"><?php echo $pageTitle; ?></li>
</ol>
</nav>
</div>
</div>
<div class="row">
<div class="col-12">
<h1 class="page_title"><?php echo $pageTitle; ?></h1>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="content"><?php GetContent($siteID); ?></div>
</div>
</div>
</div>
</section>
Your markup is wrong! As you didn't provide CSS code I have only fixed your layout.
You should've used .container > .row > .col-*-*
Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
For reference go through bootstrap grid system

Answer 3

Place your container tag out to row and col tags.
It should be like:
<div class="container">
<div class="row">
<div class="col-sm-12">
</div>
</div></div>
It will fix it!
In other cases, follow below:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Add this tag in your code, and the page will be responsive based on the screen size.