CSS Grid not centering the top row

Issue

I have an issue with the top row in the following layout. It would not center and just stay on the left part of the two columns.
It need it to be on the center like the bottom part. The one on the bottom works fine at centering itself even though I used the same way via CSS Grid. Please check the image I attached.

#about-container {
  grid-area: first;
}

#ul-first {
  grid-area: second;
}

#ul-second {
  grid-area: third;
}

#ul-third {
  grid-area: fourth;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
    "first first" 
    "second third" 
    "fourth fourth";
}

<section class="footer-links">
  <div class="about-container">
    <div class="about">
      <h1>Title</h1>
      <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, aperiam quaerat? Nam reprehenderit, amet minus illum natus facere accusamus aut voluptatem. Sapiente ipsa praesentium unde, voluptatem assumenda facilis asperiores eum!</p>
    </div>
  </div>
  <div class="list" id="ul-first">
    <ul>
      <li><a href="#">Why Buy From Us</a></li>
      <li><a href="#">Company Policy</a></li>
      <li><a href="#">Maintenance</a></li>
      <li><a href="#">Financing</a></li>
    </ul>
  </div>
  <div class="list" id="ul-second">
    <ul>
      <li><a href="#">Request a Quote</a></li>
      <li><a href="#">Get in Touch with Us</a></li>
      <li><a href="#">Book Preventive Maintenance</a></li>
    </ul>
  </div>
  <div class="list" id="ul-third">
    <ul>
      <li><a href="#">Nissan GT-R</a></li>
      <li><a href="#">Mitsubishi Lancer</a></li>
      <li><a href="#">Toyota Corolla Touring</a></li>
      <li><a href="#">McLaren P1</a></li>
    </ul>
  </div>
</section>

Solution

First, there is an error in your code : in your CSS, you specify rules for the id : #about-container but it doesn't exist in your HTML (it's a class in there).
Second, your code doesn't yield the result you have in your image (it seems you are using the property text-align:center; that I can't ssee in the code you share).

To answer your question, you can center the first element by using : .about { width:50%; margin:0 auto; } With your example, it would be (I also correted both errors I pointed out above) :

#about-container {
  grid-area: first;
}

.about {
  width: 50%;
  margin: 0 auto;
}

#ul-first {
  grid-area: second;
  text-align: center;
}

#ul-second {
  grid-area: third;
  text-align: center;
}

#ul-third {
  grid-area: fourth;
  text-align: center;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
    "first first" 
    "second third" 
    "fourth fourth";
}

<section class="footer-links">
  <div id="about-container">
    <div class="about">
      <h1>Title</h1>
      <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, aperiam quaerat? Nam reprehenderit, amet minus illum natus facere accusamus aut voluptatem. Sapiente ipsa praesentium unde, voluptatem assumenda facilis asperiores eum!</p>
    </div>
  </div>
  <div class="list" id="ul-first">
    <ul>
      <li><a href="#">Why Buy From Us</a></li>
      <li><a href="#">Company Policy</a></li>
      <li><a href="#">Maintenance</a></li>
      <li><a href="#">Financing</a></li>
    </ul>
  </div>
  <div class="list" id="ul-second">
    <ul>
      <li><a href="#">Request a Quote</a></li>
      <li><a href="#">Get in Touch with Us</a></li>
      <li><a href="#">Book Preventive Maintenance</a></li>
    </ul>
  </div>
  <div class="list" id="ul-third">
    <ul>
      <li><a href="#">Nissan GT-R</a></li>
      <li><a href="#">Mitsubishi Lancer</a></li>
      <li><a href="#">Toyota Corolla Touring</a></li>
      <li><a href="#">McLaren P1</a></li>
    </ul>
  </div>
</section>

Answered By - web-tiki