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>
.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 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
#p2 etc, instead of the
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
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.