My text is not aligned properly due to excessive padding, causing it to shift to the top right. I attempted to use Bootstrap to adjust alignment and justification but am still struggling to identify the cause of this issue. Unfortunately, I cannot provide an image as reference, so here is a visual example I'm aiming for: example link
I aim to center my text/h3/p/button along with the image.
.name,
.intro {
color: rgba(12, 11, 11, 0.6);
}
.name {
font-size: 40px;
font-weight: 700;
font-family: 'DM Sans';
}
.intro {
width: 525px;
height: 107px;
font-family: 'Ek Mukta';
font-size: 25px;
line-height: 40px;
}
#icon {
margin: 10px;
display: inline-block;
width: 300px;
height: 420px;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container align-items-center justify-content-center">
<div class="row justify-content-center ">
<div class="col-md-6">
<h3>Hi, I'm Ashley 🙋</h3>
<p class="intro">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem a, debitis, totam aa dddddd ddddd ddd aaaaaaaaa. </p>
<br>
<a href="projects.html"><button id="checkout-projects">Check out my projects!</button></a>
</div>
<div class="col-md-6">
<img id="icon" src="https://via.placeholder.com/420x300" class="img-fluid">
</div>
</div>
</div>