justify-content: center is not working with grid [duplicate] - html

Question

This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 1 year ago.
I am learning CSS grid. While practicing I got an issue. justify-content: center is not centering section-3-nav div.
Here is my code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: 'Roboto', sans-serif;
}
.container {
width: 85%;
margin: auto;
padding: 3rem 0;
}
.container > .constant {
display: grid;
justify-items: center;
}
.box-top-title > h1 {
font-weight: bold;
margin-top: 2rem;
}
.box-top-subtitle > p {
text-transform: uppercase;
color: #a8b9c0;
margin: 0.5rem 0;
font-size: 15px;
}
.box-top-hr > hr {
width: 250px;
background-color: #00c6bf;
border-width: 0;
height: 1.5px;
}
.section-3 {
background: #eff7fa;
width: 100%;
}
.section-3 > .container > .section-3-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-content: center;
margin: 3rem 0;
width: 50%;
border: 1px solid black;
}
.section-3 > .container > .section-3-nav a {
transition: 0.5s;
}
.section-3 > .container > .section-3-nav a:hover {
background: #ff3150;
padding: 10px 20px;
border-radius: 15px;
color: white;
}
<div class="section-3">
<div class="container">
<div class="constant">
<div class="box-top-img"><img src="./images/2-Bondi---PSD-Landing-Page.png" alt=""></div>
<div class="box-top-title"><h1>We Make This</h1></div>
<div class="box-top-subtitle"><p>Prepare to be amazed</p></div>
<div class="box-top-hr"><hr></div>
</div>
<div class="section-3-nav">
<div>All</div>
<div>Design</div>
<div>Code</div>
<div>Photography</div>
<div>Apps</div>
</div>
<div class="section-3-stuffs">
</div>
</div>
</div>
Where is the problem with the code? Where to fix and what to fix?
It will be very helpful for me if you help to solve the problem.
Thank you.

Answer 1

Usually you should think about positioning an element from the perspective of the parent element, not the element itself.
If you want to center the section-3-nav element as part of a grid layout, you have to either
Do it in the parent element (.container) with justify-content: center or
Use justify-self: center in the element itself
In both cases, the parent element (.container) has to use display: grid, too.

Answer 2

* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: 'Roboto', sans-serif;
}
.container {
width: 85%;
margin: auto;
padding: 3rem 0;
}
.container > .constant {
display: grid;
justify-items: center;
}
.box-top-title > h1 {
font-weight: bold;
margin-top: 2rem;
}
.box-top-subtitle > p {
text-transform: uppercase;
color: #a8b9c0;
margin: 0.5rem 0;
font-size: 15px;
}
.box-top-hr > hr {
width: 250px;
background-color: #00c6bf;
border-width: 0;
height: 1.5px;
}
.section-3 {
background: #eff7fa;
width: 100%;
}
.section-3 > .container > .section-3-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
text-align: center;
margin: 3rem 0;
width: 100%;
border: 1px solid black;
}
.section-3 > .container > .section-3-nav a {
transition: 0.5s;
}
.section-3 > .container > .section-3-nav a:hover {
background: #ff3150;
padding: 10px 20px;
border-radius: 15px;
color: white;
}
<div class="section-3">
<div class="container">
<div class="constant">
<div class="box-top-img"><img src="./images/2-Bondi---PSD-Landing-Page.png" alt=""></div>
<div class="box-top-title"><h1>We Make This</h1></div>
<div class="box-top-subtitle"><p>Prepare to be amazed</p></div>
<div class="box-top-hr"><hr></div>
</div>
<div class="section-3-nav">
<div>All</div>
<div>Design</div>
<div>Code</div>
<div>Photography</div>
<div>Apps</div>
</div>
<div class="section-3-stuffs">
</div>
</div>
</div>

Answer 3

I am presuming you want to center the div to the page itself.
Try adding:
margin: auto;
It would center the div when used with width: 50%; Else, it would stretch and center.