I am facing an issue trying to make two divs (.profile-spotify, .profile-games) the same size as .profile-card and .profile-details, or centering them. I've attempted using justify-center, margin auto, and other methods but none have been successful.
Here is the structure of the markup:
<div class="user-content">
<div class="grid sm:grid-cols-1 lg:grid-cols-2 mt-3">
<!-- Profile Card -->
<div class="profile-card text-center m-auto">
...
</div>
<!-- End of Profile Card -->
<!-- Profile Details -->
<div class="profile-details text-white m-auto mt-3 lg:mt-0">
...
</div>
<!-- End of Profile Details -->
</div>
<!-- Spotify Activity -->
<div class="profile-spotify mt-5 mb-5 m-auto">
<div class="profile-spotify-header">
...
</div>
<div class="profile-spotify-content">
...
</div>
</div>
<!-- End of Spotify Activity -->
<!-- Game Activity -->
<div class="profile-games mt-5 mb-5 m-auto">
<div class="profile-game">
...
</div>
</div>
<!-- End of Game Activity -->
</div>
And below is the relevant CSS snippet:
...
.user-content {
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
.user-content .profile-card {
background: #1f2325;
width: 15rem;
}
.user-content .profile-spotify, .user-content .profile-games {
background: #1f2325;
max-width: 30rem;
}
.user-content .profile-spotify-header {
background: #21d363;
padding: 0.5rem 1rem 0.5rem 1rem;
}
...
https://i.sstatic.net/JR67g.png
https://codepen.io/wYonut/pen/eYrQoRr
I want the layout to look like this:
https://i.sstatic.net/0mP7J.png