JavaScript CSS Selectors Quickstart CSS Selector Basics Basic Selectors Challenge

I am not sure what I am doing wrong. Can someone please help me

Here is one of the many different error msgs..I tried using #main-footer but that didnt work.

Bummer: Make sure you use a selector that targets an element with an ID of main-footer?

style.css
h1 {
  font-size: 62px;
}

img {
  margin-bottom: 20px;
}

div {
  padding: 15px;
}

footer {
  margin-top: 40px;
}
index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Basic Selectors Challenge</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>Lake Tahoe, California</h1>
      <img src="mtn-landscape.jpg" alt="foggy mountains">
    </header>
    <div>
      <h2>Journey Through the Sierra Nevada Mountains</h2>
      <p>Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.</p>
    </div>
    <footer Id="main-footer">
      All rights reserved to the state of California.
    </footer>
  </body>
</html>

2 Answers

Change Id to lowercase id. Then #main-footer should work.

i tried that and got this ummer: Error: failed to find element matching selector "footer"

and i did write <footer id=#main-footer>

does it have to do with something in my CSS?

In your html it should be:

<footer id="main-footer">

Then in your css

#main-footer {
  margin-top: 40px;
}

Thanks so much I appreciate it