How to move my name above my picture without changing the layout?

[gtrman97]

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

When I comment out these lines:

<div id="name">
  <h1>Andrew</h1>
   </div>

from my html I have the layout how I like it with the 4 red squares making up a larger square. I want that same layout while moving my name right above the picture, exactly like how the projects header is above the squares.

[tlc35us]

I’ll say this the long way because I noticed that you used a flex column for a conceptual row.

• In the concept of a page there are blocks or chunks that are essentially sections (not the tag).

• Within the section there are rows. Rows are, in concept, 100vw.

• Your project section is a de facto row with three things. They’re not vertically aligned so it may look like different rows.

• <div id="name"> should be the first row in the project section then the img and the project-cards should be in the second row of the project section.

• So you will need, at least, a wrapper div for the img and project-cards