Is there a way to center an entire flex box as one unit? For example I have a section setup using flexbox, there are three flex items. My goal is to have everything centered on the page with equal distance between the three flex items. I sort of almost have it. Everything is centered on the page but for some reason the space between the first flex item and second flex item is greater than the space between the second and third item and I don’t know why. I’ve also tried changing justify-content to space-between or space-around but this doesn’t fix the distance issue.This is what I currently have:
.aboutme-flex {
display: flex;
height: 600px;
width: 100%;
justify-content: center;
margin: 20px;
}
.aboutme-left {
width: 20%;
height: auto;
}
.aboutme-left img {
width: 100%;
height: auto;
max-height: 550px;
max-width: 350px;
border:1px solid black;
}
.aboutme-middle {
width: 40%;
height: auto;
text-align: justify;
margin-right: 50px;
margin-left: 50px;
}
.aboutme-right {
width: 20%;
height: 80%;
background-color: #D1D2D5;
border:1px solid black;
padding: 30px;
max-height: 550px;
max-width: 350px;
