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.