Bootstrap elements container class causes another bootstrap element to change - html

Question

I have a footer and I have a container for the content in the page. But the content "container" class in a div causes the footer to be applied in that container too for some reason. Here is the code:
HTML:
<section id="products" class="products py-5">
<div class="container">
<!--Section Title-->
<div class="row">
<div class="col-10 mx-auto col-sm-6 text-center">
<h1 class="text-capitalize product-title" id="promosyonHeader">
Promosyon Ürünlerimiz
</h1>
</div>
</div>
</div>
Footer HTML:
<!--Footer-->
<footer class="footer mt-5">
<div class="text-center py-5 border-top border-secondary">
<h2 class="py-1">Doğuhan Tanıtım</h2>
<div class="mx-auto heading-line"></div>
</div>
<div class="container">
<div class="container">
<div id="footer" class="row mb-0">
<div class="col-lg-8 offset-lg-2 text-center">
<p>İskitler/Ankara</p>
<p>number</p>
<p>com.tr</p>
<div class="justify-content-center">
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
</div>
</div>
</div>
<!--<div class="copyright text-center py-3 border-top text-light" id="tm"><p>Tanıtım ™</p></div>-->
</div>
</div>

Answer 1

Try this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="products" class="products py-5">
<div class="container">
<!--Section Title-->
<div class="row">
<div class="col-10 mx-auto col-sm-6 text-center">
<h1 class="text-capitalize product-title" id="promosyonHeader">
Promosyon Ürünlerimiz
</h1>
</div>
</div>
</div>
</section>
<footer class="footer mt-5">
<div class="text-center py-5 border-top border-secondary">
<h2 class="py-1">Doğuhan Tanıtım</h2>
<div class="mx-auto heading-line"></div>
</div>
<div class="container">
<div class="container">
<div id="footer" class="row mb-0">
<div class="col-lg-8 offset-lg-2 text-center">
<p>İskitler/Ankara</p>
<p>number</p>
<p>com.tr</p>
<div class="justify-content-center">
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
</footer>
I think there is problem with your bootstrap version. or you forgot closing some tags