I cannot figure out how to nest my child elements in with the parent

HTML-CSS
#1

I entered the nesting code

<main><ul> 
                                                                              <li> <h2> Cat Photos</h2></li>
                                                                              <li><!-- TODO:ADD  Name to cat photos--></li>      
                                                                             <li><p>click here to add more cat photos<p></li>
                                                                           <ul></main>

Describe your issue in detail here.

  **Your code so far**

<html>
<body>
  <h1>CatPhotoApp</h1>
  <main><ul>
    <li> <h2>Cat Photos</h2></li>
  <!-- TODO: Add link to cat photos -->
    <li> <p>Click here to view more cat photos.</p></li>
 <ul> </main>
</body>
</html>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Safari/537.36 Edg/103.0.1264.37

Challenge: Step 6

Link to the challenge:

#2

You added a bunch of ul and li elements, but the challenge doesn’t want you to do that.

In the previous step, you nested the h2 element, comment, and p element within the main element.

Add two spaces in front of the three child elements of main so your HTML is more readable.

You should only add 2 spaces on 3 lines. Don’t add anything else to the starting code.