2

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><a href="#">All</a></div>
                <div><a href="#">Design</a></div>
                <div><a href="#">Code</a></div>
                <div><a href="#">Photography</a></div>
                <div><a href="#">Apps</a></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.

Munna Tripathi
  • 95
  • 1
  • 11
  • Your grid is the same size as your grid items so technically they are centered. If you add a background colour to that div, you can see how big your grid is – Huangism May 13 '21 at 17:46

3 Answers3

3

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

  1. Do it in the parent element (.container) with justify-content: center or
  2. Use justify-self: center in the element itself

In both cases, the parent element (.container) has to use display: grid, too.

Rudy Gasson
  • 31
  • 1
1

* {
    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><a href="#">All</a></div>
                <div><a href="#">Design</a></div>
                <div><a href="#">Code</a></div>
                <div><a href="#">Photography</a></div>
                <div><a href="#">Apps</a></div>
            </div>
            <div class="section-3-stuffs">
                
            </div>
        </div>
    </div>
skkoker
  • 11
  • 2
0

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.

Akshay Srivastava
  • 58
  • 1
  • 6