CSS - buttons don't align properly - html

Question

No matter what I do (for a few hours now) I cannot align <div class="kafelek"> next to each other; the code currently looks like this:
body {
background-color: #003C3D;
}
.header {
text-align: center;
align-content: center;
padding: 20px;
font-family: 'Open Sans';
font-size: 24px;
color: #C3CECB;
}
#headerlogo {
width: 400px;
height: auto;
object-fit: cover;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
animation: slide-in 1s ease-in-out forwards;
}
#keyframes slide-in {
from {
top: -100px;
}
to {
top: 20px;
}
}
.pre1 {
width: 50%;
text-align: center;
align-content: center;
font-family: 'Open Sans';
font-size: 24px;
color: #C3CECB;
float: left;
}
.pre2 {
width: 50%;
text-align: center;
align-content: center;
font-family: 'Open Sans';
font-size: 24px;
color: #C3CECB;
float: right;
}
.alignkafel1,
.alignkafel2 {
display: flex;
flex-wrap: wrap;
}
.row {
display: flex;
}
.kolumna {
display: inline-block;
width: 48%;
font-family: 'Open Sans';
color: #C3CECB;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.kolumna:first-child {
margin-right: 0px;
}
.kolumna:last-child {
margin-left: 0px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 800px) {
.kolumna {
width: 100%;
align-content: center;
}
}
kolumna2 {
display: inline-block;
width: 48%;
font-family: 'Open Sans';
color: #C3CECB;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.kolumna2:first-child {
margin-right: 0px;
}
.kolumna2:last-child {
margin-left: 0px;
}
#media screen and (max-width: 800px) {
.kolumna2 {
width: 100%;
align-content: center;
}
}
.kafelek {
background-color: #006D57;
border-radius: 10px;
text-align: center;
height: 100px;
font-family: 'Open Sans';
font-size: 20px;
color: #C3CECB;
margin: 5px;
margin-top: 50px;
margin-right: 50px;
margin-bottom: 1px;
margin-left: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#media screen and (max-width: 800px) {
.kafelek {
display: flex;
justify-content: center;
}
}
.kafelek:hover {
border: 2px solid #7EDF00;
transition: 0.3s;
cursor: pointer;
}
<div class="header">
<img src="" img id="headerlogo" />
<br /> <br /> Centrum zgłoszeniowe AOK
</div>
<div class="pre1"> Delivery Support </div>
<div class="pre2"> Middle Mile</div>
<div class="alignkafel1">
<div class="kafelek">Koszta Dodatkowe</div>
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
</div>
<div class="alignkafel2">
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
</div>
I've been trying with multiple options but everything gets messed up in the end.
It looks like this:
Messed up website
And I want each of the 8 .kafelek (which are the buttons) to be perfectly aligned in 1 row with each other and also properly centered to align with .pre1 and .pre2
Please help ;-;

Answer 1

The container for the buttons has a width of 0 which prevents the flexbox from working properly. Adding a width fixes the problem.
.alignkafel1,
.alignkafel2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 60%;
margin: 0 auto;
}
I have added a width of 60% to align the buttons roughly to the pre above. Currently the pre have float property set. Ideally, you want a parent container to enforce the boundaries of your page content and refrain from using float css property.

Answer 2

In alignkafel1&2 set align-items and justify content properties to control the alignment of your buttons which are the flex items.

Answer 3

I removed .alignkafel1 and .alignkafel2 classes and replaced them with a single .alignkafel class with CSS Flex. The flex-direction: row property is used for .alignkafel class to give the desired layout. I additionally removed the unused CSS classes from the code.
You can see the following example:
body {
background-color: #003C3D;
}
.header {
text-align: center;
align-content: center;
padding: 20px;
font-family: 'Open Sans';
font-size: 24px;
color: #C3CECB;
}
#headerlogo {
width: 400px;
height: auto;
object-fit: cover;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
animation: slide-in 1s ease-in-out forwards;
}
#keyframes slide-in {
from {
top: -100px;
}
to {
top: 20px;
}
}
.pre1 {
width: 50%;
text-align: center;
align-content: center;
font-family: 'Open Sans';
font-size: 24px;
color: #C3CECB;
float: left;
}
.pre2 {
width: 50%;
text-align: center;
align-content: center;
font-family: 'Open Sans';
font-size: 24px;
color: #C3CECB;
float: right;
}
.row {
display: flex;
}
.row:after {
content: "";
display: table;
clear: both;
}
.kafelek {
background-color: #006D57;
border-radius: 10px;
text-align: center;
height: 100px;
font-family: 'Open Sans';
font-size: 20px;
color: #C3CECB;
margin-top: 50px;
margin-bottom: 1px;
margin-right: 10px;
margin-left: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.kafelek:nth-child(4) {
margin-right: 100px !important;
}
.kafelek:nth-child(5) {
margin-left: 100px !important;
}
.kafelek:hover {
border: 2px solid #7EDF00;
transition: 0.3s;
cursor: pointer;
}
.alignkafel {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
<div class="header">
<img src="" img id="headerlogo" />
<br /> <br /> Centrum zgłoszeniowe AOK
</div>
<div class="pre1"> Delivery Support </div>
<div class="pre2"> Middle Mile</div>
<div class="alignkafel">
<div class="kafelek">Koszta Dodatkowe</div>
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
</div>

Answer 4

i fixed your code, just paste it in your html and css file and everything will work fine. :D
<div class="header">
<img src="" img id="headerlogo" />
<br /> <br /> Centrum zgłoszeniowe AOK
</div>
<div class="pre1">
<p>Delivery Support </p>
<div class="alignkafel">
<div class="kafelek">Koszta Dodatkowe</div>
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
</div>
</div>
<div class="pre2">
</p>Middle Mile</p>
<div class="alignkafel">
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
<div class="kafelek">COMING SOON</div>
</div>
</div>
body {
background-color: #003C3D;
}
.header {
text-align: center;
align-content: center;
padding: 20px;
font-family: 'Open Sans';
font-size: 24px;
color: #C3CECB;
}
#headerlogo {
width: 400px;
height: auto;
object-fit: cover;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
animation: slide-in 1s ease-in-out forwards;
}
#keyframes slide-in {
from {
top: -100px;
}
to {
top: 20px;
}
}
.pre1 {
width: 50%;
text-align: center;
align-content: center;
font-family: 'Open Sans';
font-size: 24px;
color: #C3CECB;
float: left;
}
.pre2 {
width: 50%;
text-align: center;
align-content: center;
font-family: 'Open Sans';
font-size: 24px;
color: #C3CECB;
float: right;
}
.alignkafel {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
}
.row {
display: flex;
}
.kolumna {
display: inline-block;
width: 48%;
font-family: 'Open Sans';
color: #C3CECB;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.kolumna:first-child {
margin-right: 0px;
}
.kolumna:last-child {
margin-left: 0px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 800px) {
.kolumna {
width: 100%;
align-content: center;
}
}
.kolumna2 {
display: inline-block;
width: 48%;
font-family: 'Open Sans';
color: #C3CECB;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.kolumna2:first-child {
margin-right: 0px;
}
.kolumna2:last-child {
margin-left: 0px;
}
#media screen and (max-width: 800px) {
.kolumna2 {
width: 100%;
align-content: center;
}
}
.kafelek {
background-color: #006D57;
border-radius: 10px;
text-align: center;
height: 100px;
font-family: 'Open Sans';
font-size: 20px;
color: #C3CECB;
margin: 5px;
margin-top: 50px;
margin-right: 50px;
margin-bottom: 1px;
margin-left: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#media screen and (max-width: 800px) {
.kafelek {
display: flex;
justify-content: center;
}
}
.kafelek:hover {
border: 2px solid #7EDF00;
transition: 0.3s;
cursor: pointer;
}