Css grid layout issues - html

Question

I need help with my grid layout for a free code camp project.
Basically, I'd like to show 3 of my portfolio pages in a row. I setup a grid layout for this and can't seem to get the middle page to lineup with the others. Also, as I am brand new, feel free to give feedback on what I have so far in general.
here is the link to the codepen just in case https://codepen.io/eddiepearson/pen/xMaaYX
* {
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,300i,400');
}
html, body {
margin: 0;
padding: 0;
}
nav ul {
text-align: right;
position: fixed;
margin-top: 0;
width: 100%;
background-color: #002171;
}
nav ul li {
display: inline-block;
margin: 55px;
margin-bottom: 15px;
margin-top: 30px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
nav ul {
text-align: left;
height: 75px;
}
nav ul li {
margin: 20px;
height: 5px;
}
}
.intro {
top: 0;
background: #002171;
min-height: 55vh;
padding-top: 45vh;
}
.intro p {
text-align: center;
color: #fff;
}
.intro h1 {
text-align: center;
color: #fff;
}
.work {
margin-top: 50px;
}
.work-header {
text-align: center;
}
#projects {
display: grid;
grid-template-columns: 300px 300px 300px;
grid-row-columns: 300px 300px;
justify-content: space-evenly;
}
#third-p {
}
.project-pic {
width: 100%;
}
.project-title {
text-align: center;
}
<nav>
<ul style="list-style-type: none" id="navbar">
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
<section>
<div id="welcome-section" class="intro">
<h1>Hey i'am eddie</h1>
<p>a web dev with a focus on UX</p>
</div>
</section>
<section>
<h2 class="work-header">These are some of my projects.</h2>
<div id="projects" class="work">
<div id="first-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
<div id="second-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
<div id="third-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
</div>
</section>

Answer 1

First, you have a small issue (typo I assume) here in the CSS
grid-template-columns: 300px 300px 300px;
grid-row-columns: 300px 300px;
Shouldn't that last part be grid-template-rows?
Also you could use this to manually control each element in the grid:
#first-p {
grid-row:1;
grid-column:3;
}