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.