I cannot figure out how to raise the project headers up

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

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.

You need to adjust your height. The element inside needs to adjust to the image not stick to a particular size. Try

You can learn more about it here:

https://www.w3schools.com/cssref/pr_dim_height.asp

you can adjust the height of your image. Try not to stick to a particular size.

I recommend changing your whole page’s font to sans-serif and adjust the height of your image

html {
  scroll-behavior: smooth; 
}

You have like this right


html {
  scroll-behavior: smooth; 
  font-family:sans-serif;
}

Change like this


And for The image’s height use the height:


By MDN webdocs
See this: height - CSS: Cascading Style Sheets | MDN


By W3schools
See this: CSS height property

Ok I tried that but that only changes the position of the thumbnails not the text header.

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.