I am a beginner in bootstrap, after doing some research, I know that it is possible that an overflow-x appears when I misuse the bootstrap grid. But there I really don't know where the problem comes from
This is my code : https://jsfiddle.net/dk8powcf/2/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><article id="whyOur" class="my-5"><div class="containe-fluid"><div class="row"><div class="col-12 bg-dark"><h1>Pourquoi Nous ?</h1><div class="card-deck"><div class="card"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div><div class="card-footer"><small class="text-muted">Last updated 3 mins ago</small></div></div><div class="card"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p></div><div class="card-footer"><small class="text-muted">Last updated 3 mins ago</small></div></div><div class="card"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p></div><div class="card-footer"><small class="text-muted">Last updated 3 mins ago</small></div></div></div></div></div></div></article>How can i fix that and why this scroll appear only in this block of code among all my code ?