I'm working on a website and I have 4 grid cells which take up a section of my webpage. The issue is that all of my text is in random places, I want it to be centered within each grid item (one is gray, one is blue, one is black, one is yellow).

I've tried every combination of justify, align, self, any idea how I can do this? Any help would be very much appreciated.

Here's my jsfiddle documenting the problem: <https://jsfiddle.net/RomelF/jd8L7a6n/3/>

And here's my HTML:

```
<div class="container">
<section id="welcome-section"><h1 id="name">My name's Romel, here are some of my projects:</h1>
</section>
<section id="projects">
  <div class="project-tile" id="p1"><p class="ptext"><a href="#">Tribute Page<a></p></div>
  <div class="project-tile" id="p2"><p class="ptext"><a href="#">Political Questionnaire<a></p></div>
  <div class="project-tile" id="p3"><p class="ptext"><a href="#">Landing Page<a></p></div>
  <div class="project-tile" id="p4"><p class="ptext"><a href="#">Technical Documentation<a></p></div>
</section>

```

And here's my CSS:

```
#projects {
  width: 70%;
  display: grid;
}

...

.project-tile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: stretch;
  height: 50vh
}

#p1 {
  background: rgb(255,253,254);
  background: radial-gradient(circle, rgba(255,253,254,1) 0%, rgba(74,75,75,0.4) 100%);
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

#p2 {
  background-color: black;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

#p3 {
  background-color: blue;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

#p4 {
  background-color: yellow;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.project-tile a {
  text-decoration: none;
}

.ptext {
  align-self: center;
}

```