Problem with product landing page creation

Can someone tell me why my h2 text wont show up? I think its stuck behind the img but i tried everything to get it to go after the picture.

	<script src=""></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="" rel="stylesheet">
	<div class="back-img">
			<img id="background" src="">
	<header id="header">
		<img id="header-img" src="">
		<nav id="nav-bar">
				<a class="nav-link" href="#acoustic">Acoustic</a>
				<a class="nav-link" href="#electric">Electric</a>
				<a class="nav-link" href="#more-info">More Info</a>
	<section id="acoustic">
		<h2 class="1series">100 Series Guitars</h2>
html {
	font-family: 'Libre Baskerville', serif;
	image-rendering: high-quality;


#background {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow-x: hidden;

#header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 110px;
	background-color: rgba(255, 255, 255, 0.15);

#header-img {
	position: absolute;
	margin-left: 80px;
	margin-top: 21px;
	width: 130px;
	filter: grayscale(100%) brightness(0%);

#nav-bar {
	display: flex;
	flex-direction: row;
	justify-content: end;
	align-items: center;
	margin-right: 60px;

.nav-link {
	text-decoration: none;
	color: black;
	font-size: 20px;
	font-weight: 700;
	margin-top: 40px;
	margin-left: 50px;

.nav-link:hover {
	text-shadow: 2px 2px #613d2e;

.1series {
	font-size: 50px;

The first thing I notice this:

.1series {
	font-size: 50px;

From here:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B&W?” or “B\26 W\3F”.

1 Like

i changed them so it doesnt start with a digit, but it still wont appear :frowning:

here’s what i put:

<h2 id="series-100">100 Series Guitars</h2>
#series-100 {
	font-size: 50px;


You was right and also @kevinSmith

  z-index: -1;

should be work…

Also, why do you have content in your head? I think that’s just supposed to be metadata.

I didn’t know this about identifiers!
Thank you!

1 Like

ive managed to pop the h2 text over the image but now its ON the image instead of going under it continuously.

also @kevinSmith, thanks for correcting my mistake with the head content. ive changed it so it goes into body instead.

@miguelgiacobbe, z-index didnt work as well :frowning:

you applied it to #background
idid it and it works :thinking:

Sorry I’ve read wrong

1 Like

yes i applied it to #background. the h2 text appeared but now its on the image instead of under it

here’s my code as of now

no worries! i didnt clarify where i put it anyway

You have to delete:
position: absolute;
to #background

that makes my image have excess white space though… and the text still doesnt go where its supposed to when i deleted it

delete position: absolute;
to the h2 too

oh! that did it. the h2 text went down now. but now my image isnt fitting the entire screen. the position: absolute was what made it fit

one moment I’m tryng to fix it

sure. thank you so much for your help!! :smile:

1 Like

the problem is of your figure, that has default style

you can remove it or set it:

	padding: 0;

removing the figure tag made the white space smaller but its still there. ive tried the 0 padding and margin as well but it doesnt work