I want to raise the project headings up towards the red border so that the header and pic will be evenly spaced between the top and bottom borders. I’ve tried padding and margin and divs but it’s not moving the way I want.
the classes/ids/spacings in your page has been a little messy and it may be worth your time to clean it up. See if they are assigned to the right elements. It makes debugging much easier.
Also really try to use percentage values for sizing, it makes responsive design so much easier. Setting px sizes gives you so much problems so quickly when varying viewport size.
For your problem it’s fairly simple, you forgot the # in front of your #ph1 selector, or just make the margin-bottom value in your .project-tile bigger.
Then because the image got pushed down by the text, (The text cannot go anywhere because of the padding you set for the container) you have to go to #p1, #p2, #p3, #p4 and make your padding-top smaller.