I'm trying to align the text and images to look like this:
but instead it looks like this:
Here's the html and css that I used:
:root { font-size: 10px;}*,*::before,*::after { box-sizing: border-box;}body { font-family: "Open Sans"; Arial, sans-senrif; min-height: 100vh; background-color: #fafafa; color: #262626; padding-bottom: 3rem;}img { display: block;}.container { max-width: 93.5rem; margin: 0 auto; padding: 0 2rem;}.btn { all: unset; background: none; color: none; display: inline-block; cursor: pointer; border: none;}.btn:focus { outline: 0.5rem auto #4d90fe;}.visually-hidden { position: absolute !important; height: 1px; widows: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);}.profile { padding: 5rem 0;}.profile::after { content: ""; display: block; clear: both;}.profile-image { float: left; width: calc(33.333% - 1rem); display: flex; justify-content: center; align-items: center; margin-right: 3rem; s}.profile-image img { border-radius: 50%;}.profile-user-settings,.profile-status,.profile-bio { float: left; width: calc(66.666% - 2rem);}.profile-user-settings { margin-top: 1.1rem;}.profile-user-name { display: inline-block; font-size: 3.2rem; font-weight: 300;}.profile-edit-btn { font-size: 1.4rem; line-height: 1.8; border-radius: 0.3rem; border: 0.1rem solid #dbdbdb; padding: 0 2.4rem; margin-left: 2rem;}.profile-settings-btn { font-size: 2rem; margin-left: 1rem;}.profile-status { margin-top: 2.3rem;}.profile-status li { display: inline-block; font-size: 1.6rem; line-height: 1.5; margin-right: 4rem; cursor: pointer;}.profile-status li:last-of-type { margin-right: 0}.profile-bio { font-size: 1.6rem; font-weight: 400; line-height: 1.5; margin-top: 2.3rem;}.profile-real-name,.profile-stat-count,.profile-edit-btn { font-weight: 600;}.profile-real-name { padding-top: 100px;}.gallery { display: flex; flex-wrap: wrap; margin: -1rem -1rem; padding-bottom: 3rem; max-height: 4%; max-width: 4%;}.gallery-item { position: relative; flex: 1 0 22rem; margin: 1rem; color: #fff; cursor: pointer;}.gallery-item:hover .gallery-item-info,.gallery-item:focus .gallery-item-info { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .3);}.gallery-item-info { display: none;}.gallery-item-info li { display: inline-block; font-size: 1.7rem; font-weight: 600;}.gallery-item-likes { margin-right: 2.2rem;}.gallery-item-type { position: absolute; top: 1rem; right: 1rem; font-size: 2.5rem; text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, .1);}.gallery-item { max-width: 100%; max-height: 100%; object-fit: cover;}@media screen and (max-width: 40rem) { .profile { display: flex; flex-wrap: wrap; padding: 4rem 0; } .profile::after { display: none; } .profile-image, .profile-user-settings, .profile-bio, .profile-status { float: none; width: auto; } .profile-image { width: 7.7rem; } .profile-user-settings { flex-basis: calc(100% - 10.7rem); display: flex; flex-wrap: wrap; margin-top: 1rem; } .profile-user-name { font-size: 2.2rem; } .profile-edit-btn { order: 1; padding: 0; text-align: center; margin-top: 1rem; } .profile-bio { font-size: 1.4rem; margin-top: 1.5rem; }}@supports (display: grid) { .gallery { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: repeat(3, auto); grid-column-gap: 3rem; align-items: center; size-adjust: 100%; }}.profile-image { grid-row: 1 / -1;}.profile-image,.profile-user-settings,.profile-status,.profile-bio,.gallery-item,.gallery { width: auto; margin: 0;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Instagram Profile</title><link rel="stylesheet" href="https://fonts.googleleapis.com/css?family-Open+Sans:300,400,600"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"><link rel="stylesheet" href="style.css"></head><body><header><div class="container"><div class="Profile"><div class="profile-image"><img src="https://64.media.tumblr.com/da7f5479f2bf356eb368bec06c870a30/e2414f7430c29281-5a/s140x140/f22fdcd07c794bc0998b8f5e1fcc80ff679124af.jpg" alt=""></div><div class="profile-user-settings"><h1 class="profile-user-name">Gothixq</h1><button class="btn profile-edit-btn">Edit Profile</button><button class="btn profile settings btn" aria-label="Profile Serrings"><i class="fas fa-cog" aria-hidden></i></button></div><div class="profile-status"><ul><li><span class="profile-stat-count">4</span> posts</li><li><span class="profile-stat-count">2,009</span> followers</li><li><span class="profile-stat-count">10</span> following</li></ul></div><div class="profile-bio"><p><span class="profile-real-name">Gothixq</span> laurem ipsum</p></div></div></div></header><main><div class="container"><div class="gallery"><div class="gallery-item" tabindex="0"><img src="https://64.media.tumblr.com/7059922275f1801feac7707bb9aef733/373baf7fb6552c0f-bd/s540x810/4a1f5a2a7e500fa9de1a5647b091cf73551cbf21.gifv"><div class="gallery-item-info"><ul><li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li><li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li></ul></div></div><div class="gallery-item" tabindex="0"><img src="https://64.media.tumblr.com/4fc5ff97f019840c8684b806e3e4dcad/373baf7fb6552c0f-c2/s540x810/406a23f76d40542dffe2821223520fe4341daae8.gifv"><div class="gallery-item-info"><ul><li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li><li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li></ul></div></div><div class="gallery-item" tabindex="0"><img src="https://64.media.tumblr.com/31a5d712713237e4bfd1af8636d753ed/373baf7fb6552c0f-84/s540x810/27ab2876e0b226cb1961e1f186ea7ab12ca21362.gifv"><div class="gallery-item-info"><ul><li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li><li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li></ul></div></div><div class="gallery-item" tabindex="0"><img src="https://64.media.tumblr.com/9bb4405d8d25e2b4cbc73917085833b7/373baf7fb6552c0f-d5/s540x810/e5d4035281ceb86c6c99ce801350b909b357d579.gifv"><div class="gallery-item-info"><ul><li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li><li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li></ul></div></div><div class="gallery-item" tabindex="0"><img src="https://i.pinimg.com/564x/09/02/7c/09027c75ea12ecab37c7da67fce5ba5c.jpg"><div class="gallery-item-info"><ul><li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li><li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li></ul></div></div><div class="gallery-item" tabindex="0"><img src="https://i.pinimg.com/564x/ed/b7/f9/edb7f95c63f3ce3b3fbc377e5d7330f4.jpg"><div class="gallery-item-info"><ul><li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li><li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li></ul></div></div></div></div><div class="loader"></div></main></body></html>I tried a bunch of things, like grouping all the images into one div class but that just messes with the likes & comments overlay, any help?