Follow-card html css - html

Question

I made this followers Card design but am having a bit of problem when styling it, when I try to add margin-right to align the image to the right side of the container for some reason it doesn't align to the right, It aligns it more to the left and it stretches the container, it also grabs the text even though they're both in separate containers, same for the button. And for some reason instead of using padding on the follow__content, I instead used gave a width but for some reason the image get left out.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.2%;
font-family: Roboto, Arial, Helvetica, sans-serif;
}
.follow__container {
display: grid;
place-items: center;
height: 100vh;
}
.follow__content {
background-color: rgba(206, 194, 178, 0.836);
line-height: 1.2;
padding: 2rem 10rem;
}
.img__container {
width: 35px;
display: inline-block;
margin-right: 2rem;
margin-top: 0.5rem;
}
.img__container img {
width: 35px;
height: 35px;
object-fit: cover;
object-position: center;
border-radius: 5rem;
}
.follow__desc {
display: inline-block;
margin: 0 0 0 0.5rem;
font-size: 0.99rem;
}
.follow__btn {
display: inline-block;
font-size: 1.2rem;
left: 8rem;
position: relative;
top: -1.6rem;
cursor: pointer;
}
.follow__btn a {
text-decoration: none;
padding: 1rem 1.5rem;
background-color: #222095;
color: #ffffff;
border-radius: 1rem;
}
<div class="follow__container">
<div class="follow__content">
<div class="img__container">
<img src="cybercybrog.jpg" alt="">
</div>
<div class="follow__desc">
<h2>Mr Cyborg</h2>
<p>#CyberCity</p>
<p>Most Popular</p>
</div>
<div class="follow__btn">
Follow
</div>
</div>
</div>

Answer 1

I think this is your desired output.I used the padding property in the follow__content class and changed its' values by giving all the sides padding like this. Since you had given padding only for two sides it was applied incorrectly.
.follow__content {
background-color: rgba(206, 194, 178, 0.836);
line-height: 1.2;
padding: 10px 100px 10px 10px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.2%;
font-family: Roboto, Arial, Helvetica, sans-serif;
}
.follow__container {
display: grid;
place-items: center;
height: 100vh;
}
.follow__content {
background-color: rgba(206, 194, 178, 0.836);
line-height: 1.2;
padding: 20px 100px 20px 10px;
}
.img__container {
width: 35px;
display: inline-block;
margin-right: 0rem;
margin-top: 0.5rem;
}
.img__container img {
width: 35px;
height: 35px;
object-fit: cover;
object-position: center;
border-radius: 5rem;
}
.follow__desc {
display: inline-block;
margin: 0 0 0 0.5rem;
font-size: 0.99rem;
}
.follow__btn {
display: inline-block;
font-size: 1.2rem;
left: 8rem;
position: relative;
top: -1.6rem;
cursor: pointer;
}
.follow__btn a {
text-decoration: none;
padding: 1rem 1.5rem;
background-color: #222095;
color: #ffffff;
border-radius: 1rem;
}
<div class="follow__container">
<div class="follow__content">
<div class="img__container">
<img src="https://www.slashfilm.com/img/gallery/joss-whedon-says-he-cut-cyborgs-justice-league-storyline-because-ray-fisher-is-a-bad-actor/l-intro-1642457019.jpg" alt="Profile Image">
</div>
<div class="follow__desc">
<h2>Mr Cyborg</h2>
<p>#CyberCity</p>
<p>Most Popular</p>
</div>
<div class="follow__btn">
Follow
</div>
</div>
</div>