i had a couple problems with my flexbox project. first of all the nav doesnt fully center 3 items, so the .middle one isnt perfectly centered as you can see.In the main part i have a OneByOne div, and a aboutOneByOnes. but i dont know how to outline them so they fit correctly. i want it to be outlined as the image below but i cannot get it done as i dont think its a good habit to give fixed values to the aboutOneByOnes div. Heres my code + css.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bit-academy</title><link rel="stylesheet" href="style.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"></head><body><nav><div class="left"><img src="logo_white.png" class="logo" alt=""></div><div class="middle"><div class="nav-item"><img src="universe_icon.png" class="icon" alt=""><span>Universe</span></div><div class="nav-item"><img src="reviews_icon.png" class="icon" alt=""><span>Reviews</span></div><div class="nav-item"><img src="feedback_icon.png" class="icon" alt=""><span>1:1's</span></div><div class="nav-item"><img src="doelen_icon.png" class="icon" alt=""><span>doelen</span></div><div class="nav-item"><img src="leaderboard_icon.png" class="icon" alt=""><span>leaderboard</span></div><div class="nav-item"><img src="meer_icon.png" class="icon" alt=""><span>meer</span></div></div><div class="right"><div class="xp"><p>Level 14 - 3 %</p></div><div class="nav-right-item"><img src="credits_icon.png" class="icon-right" alt=""><span>3</span></div><div class="nav-right-item"><img src="profile.png" class="icon-right" alt=""><img src="meer_icon.png" class="icon-right" alt=""></div></div></nav><main><div class="oneOnOne"><h1>1:1's</h1><table><tr><th>Coach</th><th>Gecreëerd</th><th>Voltooid</th><th>Status</th><th></th></tr><tr><td class="text">Bob, de Coach</td><td class="text">26 minuten geleden</td><td class="text"></td><td class="text">Bezig</td><td class="btn">Vul in</td></tr><tr><td class="text">Bob, de Coach</td><td class="text">16 uur geleden</td><td class="text"></td><td class="text">Wachten op Coach</td><td></td></tr><tr><td class="text">Mo, Hulpcoach</td><td class="text">60 dagen geleden</td><td class="text">42 dagen geleden</td><td class="text">Afgerond</td><td class="btn">Bekijk</td></tr></table></div><div class="aboutOneOnOne"><h2>Over 1:1's</h2><span>Om jouw groei in beeld te krijgen voer je samen met je coac 1-op-1 gesprekken. Tijdens een 1:1 gesprek bespreek je samen met je coach je huidige vaardigheden en kies je nieuwe vaardigheden uit om aan te werken. Zo zorgen we samen dat je groeit.</span><img src="growth.png" class="growth" alt=""></div> </main></body></html>* { padding: 0; margin: 0; box-sizing: border-box; font-family: 'IBM Plex Mono';}nav { display: flex; align-items: center; /* Vertically align items */ justify-content: space-between; background-color: #000563; text-transform: uppercase;}.logo { width: 70px; height: 30px; margin: 10px;}.middle { flex: 1; /* Let the middle section take available space */ display: flex; justify-content: center; /* Center items horizontally */ color: white;}.right { display: flex; align-items: center; margin-right: 10px; /* Add some margin to the right */}.nav-item, .nav-right-item { display: flex; align-items: center; padding: 0 10px; margin: 3px 5px; color: white;}.profile { border-radius: 40px;}.icon { width: 24px;}.icon-right { width: 24px; height: 24px; margin-right: 2px;}main { display: flex; justify-content: center; background-color: #e7e7e7; height: 100vh;}table { margin-top: 20px; background: white; text-align: left; margin-left: 20px;}.text, th { padding: 1rem;}tr { border-bottom: 1px solid rgb(216, 216, 216);}.oneOnOne { flex-grow: 0; max-width: 100%;}.aboutOneOnOne { flex: 1; display: flex; flex-direction: column; background-color: white;}.growth { margin: 0 auto; width: 24vh;}.xp { color: white;}.btn { background-color: rgb(80, 173, 76);}Here is an image of how i want it to be, anyone got an idea on how to fix some of the problems im facing?
I tried using border collapse but that would mean some of my padding disappeared, apart from that i tried to give fixed widths on the aboutOneByOnes, but i think there is a better way im just not seeing as you usually dont want to give fixed px widths. i tried justify-content: center on the parent aswell but that seems to not be working.