Items not centering inside of grid container

Question

I am having trouble centering a heading and text element in a 2x2 grid. I have already tried using justify-content/items/self on the parent container ".skills", and the child-elements ".skills-item". Also, note that the grid is inside a flex container, I do not know if that has anything to do with it but I am clueless.

 .about { display: flex; flex-direction: column; align-items: center; padding: 12.8rem 8rem 6.4rem 8rem; background-color: #ebebff; }.backstory { display: flex; flex-direction: column; align-items: center; width: 60rem; margin-bottom: 4.8rem; text-align: center; }.skills { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 4.8rem; column-gap: 6.4rem; justify-items: center; }.skills-item { display: inline-block; }

 <section class="about"> <div class="backstory"> <h2>Hi, I'm Mayitu Wangala</h2> <p> I'm a software developer. I became interested in computer science in college and became immersed in the world of IT. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci. </p> </div> <div class="skills"> <,--Rename/regroup skills later--> <div class="skills-item 3-lang"> <h3 class="skills-heading">HTML, CSS, Javascript</h3> <p> My knowledge of HTML, CSS, and javascript allows me to create beautiful. responsive projects and websites. </p> </div> <div class="skills-item python"> <h3 class="skills-heading">Python</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci </p> </div> <div class="skills-item data-structures"> <h3 class="skills-heading">Data Structures</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci </p> </div> <div class="skills-item design"> <h3>Design</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci </p> </div> </div> </section>

Answer 1

You should set the parent class as flexbox in order to align the child elements as you wish.

 .skills-item{
    display:flex;
    }

Since the text inside p tags won't seem like centered, even if it is, you can try to use text-align:center; .