My content doesn't fully align within the div, and the link appears on the right instead of centered at the bottom as shown in the previous example. How can I resolve this?
The non-functional section:
<section class="row">
<header class="col-12">
<hr class="privacy-hr">
<h1><!--Tables, buttons and forms in Bootstrap-->Tables, buttons and forms in Bootstrap</h1>
<hr class="privacy-hr">
</header>
<article class="col-12 col-lg-6 col-xl-7 d-flex">
<div class="alert alert-light d-flex flex-wrap" role="alert">
<div class="flex-grow-1 align-self-start">
...
</div>
<div class="flex-grow-1 align-self-end">
...
</div>
</div>
</article>
<article class="col-12 col-lg-6 col-xl-5 d-flex mb-3">
<img alt="grid" src="img/headings.webp" width="100%" height="100%">
</article>
</section>
The functional section:
<section class="row">
<header class="col-12">
<hr class="privacy-hr">
<h1><!--Typography-->Typography</h1>
<hr class="privacy-hr">
</header>
<article class="col-12 col-lg-6 col-xl-7 d-flex">
...
</article>
<article class="col-12 col-lg-6 col-xl-5 d-flex mb-3">
...
</article>
</section>
The entire code snippet includes HTML, CSS, and JavaScript files for a website showcasing Bootstrap tutorials.