How do I make the 4 red border links at the bottom take up only the right half of the screen?

https://codepen.io/gtrman97/pen/eYBQMwE

I want them all to be individual squares while also making up one larger square kind of like how they already are. But I want the left margin to be the middle of the page so they only take up the right side of the screen.

You’d have to group them in a <div>, and remove the left:115px. So the HTML would be like

<div id="projects">
  <h1 id="project-header">Projects</h1>
    
  <div class="project-square">
     <!-- your project squares here --> 
  </div>
</div>

The .projecct-square div then needs a width of 50%. And flex and flex-wrap, too.

Ok but now they are wide rows with one project per row, I want two squares per row.

I don’t see any changes in your HTML, you need to put the four project-divs into another <div>:

<div id="projects">
  <h1 id="project-header">Projects</h1>
    
  <div class="project-square">
     <div id="#p1">
     <div id="#p2">
     <div id="#p3">
     <div id="#p4">
  </div>
</div>

Also, you’ve applied width:50% and flex and flex-wrap to your projects #p1, #p2 etc, instead of the .project-square container.

Ok but when I do that would the top “projects” div become obsolete?

No, you have two elements (the <h1> and the .project-square), and you want them to sit next to each other. So you make #projects a flex-container.

Then you have your .project-square, and you want your project tiles to sit next to each other (in two rows). So you make your .project-square a flex-container with flex-wrap:wrap.

It might make sense to revisit the flex-lessons in the curriculum, or to read up about it elsewhere, or to just try things out and learn-by-doing.