As a novice in HTML and CSS, I'm facing a puzzling issue while learning at school. The first header and two images within the container where my background image is placed are overlapping the background image, creating a large gap. Strangely, the subsequent headers and images below are not overlapping the background image, causing this unusual spacing. I used ::before to make the background image semi-transparent, but it resulted in the other headers creating space between themselves and the background image. Can someone explain why this is happening? There's significant space between the vines and the next header below them, and I want the header to overlap the vines like the 'Home' header does. Please ignore any white space discrepancies as they stem from a flawed screenshot capture. Apologies for that error.
I've only included a snippet of my code below. If necessary, I can provide additional headers and paragraphs. How do I eliminate the small gap between the top of the page and the background image? Feel free to ask for more details if required. Thank you so much :)
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
</head>
<!-- Code omitted for brevity -->