Hello. Something odd has happened here. First, the <main> element should contain the <h2> element. Second, your comment, <p> and <h2> elements should all be at the same distance from the left border of the window, because they are all nested inside the same element and are its direct children. I’m unsure how to explain this, so here is an example:
<html>
<head>
<title>Title</title>
</head>
<body>
<p>Text!</p>
<p>More text!</p>
</body>
</html>
Reading this code you can easily tell what element is nested where, where an element begins and ends… It is much more readable than if it had no indents. Now, what I was going to explain: as you can see, the <head> element is contained within the <html> element, just like the <body> element. This is why they are at the same indent level, so to speak. However, even though the <title> and <p> elements are also contained within the <html> element, they are at a different level because they’re at a lower level in the hierarchy, so to speak. Since they are not direct children of <html>, but rather, children of its children, they’re one level more to the right. And you add in more levels according to how deep down a ‘family’ you go, e.g.:
<html>
<body>
<main>
<section>
<h1>
...