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.
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.