I'm completely new to coding and I can't figure out why the hero image is covering up all the other content, even with z-index in place.
Here is how the webpage should appear, but unfortunately, the hero image is hiding the logo, top navigation bar, and header/description text about the first castle.
body {
margin: 0;
padding: 0;
}
* {
font-family: 'Open Sans', sans-serif;
}
header,
footer,
main {
width: 1040px;
margin: 0 auto;
}
...
...(CSS code continues)
...
<!DOCTYPE html>
<html lang="en" dir="ltr">
...
...(HTML code continues)
...
Specifications:
Summary
You are building the home page layout for Castle Explorers.
Use a combination of positioning, float, and box model for the layout design.
This layout can draw from various elements covered in the course.
... ...(Specifications continue) ...
Any suggestions? Feeling stuck as the deadline is approaching...appreciate any help!