CSS GRID - Div's and text dont match

HTML-CSS
1

i can use some help with some really simpe HTML and CSS. GitHub link ahead.

1)CSS GRID - why i cant make the div’s with the text to sit perfectly on the div with the background url? i created a container, gave him a background, all grids are equals, why there are weird spaces on some of the grids?

  1. i would love any inputs regarding this page, if you have any comment about design, code structure or anything, please let me know as im seeking to improve and grow. thank you so much!

i tried changing the width, changing the size of the pic, change from h1 to h6.

i want the layout to sit perfectly, text above image. Thank you!

2

Why so many divs? :astonished: I would personally remove every div with a class container, it’s useless basically.
Looking at your CSS, adding background-size: 100%; or background-size: cover; to divs with background images seems to fix that images/weird spaces problem.

3

@vytautas-pilk is so kind to go through unhosted code for you. Github code should be hosted as a github page.

What is the point of using grid when so much of the page is position: absolute;. It doesn’t make sense.

4

How should i make it a hosted page? or would it be better if i upload it to codepen?