Template Post when clicking "Ask for Help" in Responsive Web Development

Describe the Issue

I feel like the base template for asking help in the Responsive Web Development Certification is a bit unintuitive.

First let me point out a couple of points:

1. The code block of HTML starts with /* file: index.html */ as opposed to the HTML comments of <!-- file: index.html -->. This will makes it harder to copy paste people’s code and find the problem as some may overlook this comment which can cause the checker to fail (As seen in this post https://forum.freecodecamp.org/t/learn-css-colors-by-building-a-set-of-colored-markers-step-7/551034).
2. Some text that I assume function as a heading uses inconsistent formatting. Such as how **Tell us What's happening:** is different from **Your code so far** (there is a tab which can look like a code block after posting it.

Template:

**Tell us what's happening:**
Describe your issue in detail here.


      **Your code so far**
      
```html
/* file: index.html */

```

```css
/* file: styles.css */

```




      **Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36</code>

**Challenge:**  Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 22

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-22

What I propose:

### Tell us what's happening:
Describe your issue in detail here.


### Your code so far
```html
<!-- file: index.html -->

```

```css
/* file: styles.css */

```




### Your browser information:

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36</code>

### Challenge:
Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 22

### Link to the challenge:
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-22

Affected Page

https://forum.freecodecamp.org/c/html-css/423

Steps to Reproduce

1. Go to ‘Any step in Responsive Web Development’
2. Check the code several times until the “Ask for Help” appears
3. Click on ‘Create a help post in the forum’
4. Minor Inconvenience

Expected behavior

It should be intuitive and consistent such that the user won’t be confused to how to format the page. At least that’s what I’m hoping

Screenshots

No response

System

• Device: [e.g. iPhone 6, Laptop]
• OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 22]

Additional context

No response

[bbsmooth]

I just want to point out that heading levels should not be determined by looks but rather by their position in the heading hierarchy. If a heading looks out of place or is distracting in some way then this can be fixed with CSS. But the actual heading level number should be appropriate for where it is on the page.

[ShaunSHamilton]

I am happy with changing them to level 2 headings. Personally, they look a bit big, but otherwise it makes sense.

However, this does not solve the dedent issue: