JSFiddle - React, Tailwind, and code Playground

HTML

<header class="bigname">
    <a href="index.html">McKay Pruitt</a>
</header>

<!-- nav is an HTML5 tag used to 
     represent site navigations -->
<nav class="phototable">
    <a href="#">
        <img src="http://placekitten.com/200/200" />
    </a>
    <a href="#">
        <img src="http://placekitten.com/200/200" />
    </a>
    <a href="#">
        <img src="http://placekitten.com/200/200" />
    </a>
    <a href="#">
        <img src="http://placekitten.com/200/200" />
    </a>
    <a href="#">
        <img src="http://placekitten.com/200/200" />
    </a>
    <a href="#">
        <img src="http://placekitten.com/200/200" />
    </a>
    <a href="#">
        <img src="http://placekitten.com/200/200" />
    </a>
    <a href="#">
        <img src="http://placekitten.com/200/200" />
    </a>
    <a href="#">
        <img src="http://placekitten.com/200/200" />
    </a>
</nav>

CSS

.bigname {
    /* You don't need to play with widths to align your 
       text to the right; simply specify the following */
    text-align: right;
    font-weight: bold;
}

.phototable {
    width: 630px;
    margin: 0 auto;
}

/* This targets the links in your phototable */
.phototable a {
    display: block; /* This makes sure padding is applied to all sides of the image */
    width: 200px;
    height: 200px;
    padding: 4px;
    text-align: center;
    /* This places the links next to each other 
       until an additional one will no longer fit into 1020px 
       so it is pushed to the next line */
    float: left;
}

/* If you do want your whole page to be exactly 1020px wide,
   add the following rule to your body element to position 
   everything to the center with your required width */
body {
    width: 1020px;
    margin: 0 auto; /* This centers everything */
    border: 1px solid black; /* I am adding a border so you can see the effect of centering */
}