Issue with centre alignment of text in flexbox and headings

Question

Currently the text headings which are inside a flexbox (the three divs) are not aligning with the main headings on the rest of the page. See Image Here

The issue appears to only take place with the character length of the text headings inside the flexbox of three divs are not the same.

See Image of Alignment when character length is the same

I've unsuccessfully tried css alignments, but they do not appear to have an effect. My desired outcome for the three divs is something like this:

See successful reference alignment example

The code is here:

 * { margin: 0; padding: 0; box-sizing: border-box; max-width: 100vw; list-style: none; scroll-behavior: smooth; } body { height: 100%; margin: 0; background-color: white; font-family: Poppins; min-height: 100vh; } a { color: black; } /* ----------------------------------------------------------Landing Page -------------------------------------*/.full-height-grow { height: 100%; display: flex; flex-direction: column; } section { display: flex; height: 100vh; width: auto; max-width: 80vw; min-width: 75vw; justify-content: center; align-items: center; margin: 0 auto; }.about-container { padding-top: 100px; height: 100vh; width: 90vw; max-width: 90vw; display: flex; flex-direction: column; align-items: center; text-align: center; }.about-img { border-radius: 50%; height: calc(80px + 40%); width: auto; }.about-h1 { font-family: 'Poppins', sans-serif; color: rgb(255, 42, 95); margin-top: 30px; margin-right: -30px; margin-left: -30px; font-size:calc(12px + 0.8vw); }.about-h2 { font-family: 'Poppins', sans-serif; color: rgb(17, 17, 17); margin-right: -30px; margin-left: -30px; font-size:calc(15px + 2vw); font-weight: 500; opacity: 0.9; }.about-desc { font-family: Lora; font-size:calc(10px + 1.2vw); line-height: 1.8; color: #888888; text-align: center; margin-left: 25vw; margin-right: 25vw; overflow:hidden; z-index: 2; width: auto; }.about-tasks-container { align-self: center; background-color: blanchedalmond; max-width: 80vw; width: 80vw; display: flex; justify-content: space-evenly; text-align: center; flex-direction: row; flex-grow: 1; }.about-task-heading { font-size: 80px; }.about-tasks-resources { }.about-tasks-learning { }

 <section class="about-section"> <div class="about-container" id="about"> <h2 class="about-h1"> ABOUT</h2> <h3 class="about-h2">More About Me</h3> <div class="about-tasks-container"> <div class="about-tasks-tutorials"> <h1 class="about-task-heading">Example</h1> </div> <div class="about-tasks-resources" > <h1 class="about-task-heading">Exampler</h1> </div> <div class="about-tasks-learning"> <h1 class="about-task-heading">Examplers</h1> </div> </div> </div> </div> </section>

(JSFiddle: https://jsfiddle.net/2cL5h4m6/9/ )

Answer 1

Try this code

Idk if this is what you wanted but you can try it and you can see if it was the thing you looked for

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100vw;
  list-style: none;
  scroll-behavior: smooth;

}
body {
  height: 100%;
  margin: 0;
  background-color: white;
  font-family: Poppins;
  min-height: 100vh;
}


a {
  color: black;
}

/* ----------------------------------------------------------Landing Page -------------------------------------*/
.full-height-grow {
  height: 100%;
  display: flex;
  flex-direction: column;
}

section {
  display: flex;
  height: 100vh;
  width: auto;
  max-width: 80vw;
  min-width: 75vw;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}




.about-container {
  padding-top: 100px;
  height: 100vh;
  width: 90vw;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  
}

.about-img {
    border-radius: 50%;
    height: calc(80px + 40%);
    width: auto;
}
.about-h1 {
    font-family: 'Poppins', sans-serif;
    color: rgb(255, 42, 95);
    margin-top: 30px;
    margin-right: -30px;
    margin-left: -30px;
    font-size:calc(12px + 0.8vw) ;
}

.about-h2 {
    font-family: 'Poppins', sans-serif;
    color: rgb(17, 17, 17);
    margin-right: -30px;
    margin-left: -30px;
    font-size:calc(15px + 2vw) ;
    font-weight: 500;
    opacity: 0.9;
}

.about-desc {
    font-family: Lora;
    font-size:calc(10px + 1.2vw);
    line-height: 1.8;
    color: #888888;
    text-align: center;
    margin-left: 25vw;
    margin-right: 25vw;
   overflow:hidden;
   z-index: 2;
   width: auto;
   
}
.about-tasks-container {
    align-self: center;
   background-color: blanchedalmond;
    max-width: 100vw;
    width: 100vw;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    flex-direction: row;
    flex-grow: 0;
    
}

.about-task-heading {
 font-size: 30px;
    

}

.about-tasks-resources {

  


}

.about-tasks-learning {

   


}```