I added the CSS to my page, and now the HTML looks weird... my name's uppercase and everything isn't aligned properly. Is there any way I can fix this? Here's my HTML code:
<div class="container px-0 mt-md-5 mt-4 mb-4">
<!---------------- TOP BANNER -------- CHOOSE A SEAMLESS PATTERN ---------------------------------------------->
<div class="card border-0 modal-open bg-faded" style="border-radius: 1em; box-shadow: 0px 0px 16px rgba(0,0,0,.2);">
<div style="background: url(https://static.flocabulary.com/media/images/56deb6b6f9c293daba012097bf30d9ea/SCI-tropical-rainforest-image.jpg) fixed;
height: 180px;"class="card-block" ></div>
<div class="row no-gutters">
<!--------- left section -------- name and links ------------>
<div class="col-md-3">
<div class="card card-block d-block bg-faded border-0 rounded-0">
<!---------------- 200 x 200 AVATAR IMAGE ---------------------------------------------->
<img src="https://i.ibb.co/0C0XQR4/Dai-Li-sergeant.png"
class="bg-faded p-2 rounded-circle d-block mx-auto mb-2" style="max-height: 200px; margin-top: -100px;">
<!-------- NAME & FOCAL ADJECTIVES ----------------------------------------->
<div class="text-lg-left text-center">
<h1 class="display-4 text-muted mb-0">
Kαrα Kσrussí
</h1>
<p class="ml-lg-2 mb-4" style="letter-spacing: .5px;">
αírвєndєr . thєч/thєm . 14
</p>
</div>
<!---------------- SOCIAL MEDIA LINKS -- LEAVE CREDIT -- USE FONT AWESOM ICONS ----------->
<p class="text-uppercase text-muted mb-0" style="letter-spacing: 1px;"><i class="fal fa-link fa-fw" /> Links</p>
<hr class="mt-0">
<div style="letter-spacing:1px;">
<a href="https://www.youtube.com/c/KaraMagpie/" class="d-block mb-2" target="_BLANK">
<i class="fab fa-youtube fa-fw pull-right" />Youtube</a>
<a href="https://www.redbubble.com/people/Kara-Designs/" class="d-block mb-2" target="_BLANK">
<i class="fas fa-ruler fa-fw pull-right" /> Redbubble</a>
<a href="https://scratch.mit.edu/users/KaraKorussi/" class="d-block mb-2" target="_BLANK">
<i class="fas fa-cat fa-fw pull-right" /> Scratch</a>
<a href="#" class="d-block mb-2" target="_BLANK">
<i class="fab fa-discord fa-fw pull-right" /> ###name</a>
<a href="/Eggy" class="d-block mb-2" target="_BLANK">
<i class="fas fa-code fa-fw pull-right" /> Credit</a>
</div>
</div>
</div>
<div class="col-lg-7 col-md-6 px-md-1 px-3">
<!-- main content area ------------------------------------------------------------->
<div class="card d-block p-3 my-md-3" style="height: 500px; overflow:auto; border-radius: 1em; font-size: 10pt;">
<h1 class="text-muted text-uppercase" style="letter-spacing: 1px; font-weight:300;">
<i class="fal fa-stars fa-fw" /> About Me</h1>
<p> <i>whєn σвlívíσn ís cαllíng σut чσur nαmє... </i> <br> <br>
Hello; Kara here! I'm a Christian furry artist and author. When I'm not drawing or writing, I'm going outside, reading, or making Youtube videos. Recently I've been getting into making fursuits, but so far I'm very new at it. Some shows I like to watch are Avatar: The Last Airbender, Legend of Korra, My Hero Academia, and Green Eggs and Ham. I also listen to a lot of Bastille and Imagine Dragons songs, but I'm open to recommendations as long as they're not explicit. <br> <br> <i> чσu'll αlwαчs tαkє ít furthєr thαn í єvєr cαn... </i>
<br> <br> I'm currently working on a novel trilogy called The Forgotten Legacy, it should be out in a couple years. Only a couple TFL characters are on my Toyhouse, and their designs aren't updated properly, so please don't make any fanart of them without prior permission. Please enjoy my profile; thank you!
<br> <br> <i> вαstíllє, σвlívíσn </i></p>
<!----- extras ---- you can just erase this if you don't wanna use it ----------->
<div class="row no-gutters mx-md-0 mx-3">
<!-------- art section ------------->
<div class="col-md-6 pr-md-2 mb-2">
<h1 class="text-muted text-uppercase mt-4" style="letter-spacing: 1px; font-weight:300;">
<i class="fal fa-pencil-paintbrush fa-fw" /> Art</h1>
<div class="justify-content-between">
<span class="text-muted">
commissions</span>
<i>open</i>
</div>
<hr class="my-2">
<div class="justify-content-between">
<span class="text-muted">
trades</span>
<i>closed</i>
</div>
<hr class="my-2">
<div class="justify-content-between">
<span class="text-muted">
requests</span>
<i>always closed</i>
</div>
</div>
<div class="col-md-6 pl-md-2 mb-2">
<!------------ trades section ---------------------------------------------------->
<h1 class="text-muted text-uppercase mt-4" style="letter-spacing: 1px; font-weight:300;">
<i class="fal fa-exchange fa-fw" /> Commissions</h1>
<a href="https://toyhou.se/9687586.commissions" class="btn btn-secondary btn-block btn-sm m-1">Information</a>
<a href="https://toyhou.se/KaraAirbender/characters/folder:1804372" class="btn btn-secondary btn-block btn-sm m-1">Characters for Sale</a>
<a href="https://toyhou.se/9687586.commissions/9800826.to-do-list" class="btn btn-secondary btn-block btn-sm m-1">To-Do List</a>
</div>
</div><!---- end extras ----------->
<h1 class="text-muted text-uppercase mt-4" style="letter-spacing: 1px; font-weight:300;">
<i class="fal fa-list-alt fa-fw" /> Quick Facts</h1>
<ul>
<li>I'm biromantic ace</li>
<li>My favorite color's green</li>
<li>I've been doing digital art since 2019</li>
</ul>
</div>
</div>
<!--------- right section -------- featured characters ------------>
<div class="col-lg-2 col-md-3">
<div class="h-100 d-flex flex-md-column justify-content-between py-3">
<!-- featured characters -- fill in name, icon & link ------------------------------------------------>
<div class="mx-md-0 mx-1 col-md-auto col">
<a href="https://toyhou.se/8387477.kara" target="_BLANK">
<img title="kara"
src="https://i.ibb.co/rscJ8DF/5fd4006be589faa2bd07d55e-jyytj.jpg"
class="d-block mx-auto img-thumbnail tooltipster"
style="max-height: 150px; border-radius: 1em;">
</a>
</div>
<div class="mx-md-0 mx-1 col-md-auto col">
<a href="https://toyhou.se/8919089.sable-pine" target="_BLANK">
<img title="sable"
src="https://i.ibb.co/K2BRRbP/Amazon-Jungle-Yasuni-Ecuador-scaled.jpg"
class="d-block mx-auto img-thumbnail tooltipster"
style="max-height: 150px; border-radius: 1em;">
</a>
</div>
<div class="mx-md-0 mx-1 col-md-auto col">
<a href="https://toyhou.se/8543903.u---tamu" target="_BLANK">
<img title="u'otamu"
src="https://i.ibb.co/x5mKmLZ/71-YWtw-Zqjp-L-AC-SL1001.jpg"
class="d-block mx-auto img-thumbnail tooltipster"
style="max-height: 150px; border-radius: 1em;">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
