Why is my #title-block-header placed inside the #quarto-content section ?

[AksharPrasanna]

Description

I've attached a screenshot of the inspect element. My understanding was that the quarto title remains as a separate element. What am I missing here?

[mcanouil]

Where do you want it to be? In the sidebar?

My understanding was that the quarto title remains as a separate element

What does that mean? Separate from what?

Also, please share code to reproduce, not only a screenshot, especially if you don't add alternative text (i.e, Screenshot 2025-03-22 at 5 50 19 PM is not informative).

[AksharPrasanna]

Apologies. Basically, My understanding was that the title block header would remain outside the quarto content section as in this screenshot -

I am currently having issues with the quarto-margin sidebar because it is located inside the quarto-content section. Since the title is also inside the content, I could not figure out how to reduce it.

This is the code I am using -

title: "Latest Analysis"
subtitle: "The most recent posts we have published."
format:
  html:
    page-layout: full

listing:
  - id: publications-list
    contents: ../content/publications/*.qmd
    type: default
    sort: "date desc"
    categories: true
    sort-ui: true
    filter-ui: true
    feed: false
    page-size: 7

.quarto-title-block {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    background-image: url("assets/images/hero-banner.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    padding: clamp(15px, 3vw, 40px);
    border-bottom: 1px solid rgba(97, 13, 61, 0.1);
  
    .quarto-title {
      padding: clamp(20px, 4vw, 40px);
      max-width: 1280px;
      margin: 0 auto;
      text-align: left;
      background-color: white;
    }
  
    .quarto-title h1 {
      font-size: clamp(32px, 5vw, 48px);
      color: #610d3d;
      font-weight: 500;
      margin-top: clamp(10px, 1.5vw, 16px);
      margin-bottom: clamp(10px, 1.5vw, 16px);
      line-height: 1.2;
    }
  
    .quarto-title .subtitle {
      font-size: clamp(16px, 2vw, 20px);
      color: #404040;
      font-weight: 300;
      margin-bottom: 0;
      line-height: 1.5;
    }
  }

I am not that well versed with CSS if I am missing something :/

[AksharPrasanna]

Please do let me know if you need anything else

[mcanouil]

Also, please share code to reproduce, not only a screenshot,

Still you've shared more screenshots and only unusable (as is) snippets of code.

This is not to annoy you but you have a working example, none of the readers (this includes me) do, so you are here requesting us to make up an example to look at it, thus spend the limited resource that is time.

Share something that can be used to investigate.
You can start with quarto create project blog and share a Git repository.