Quarto Embedded HTML Rendering Creates Additional Container

I have the following code in a .qmd file. I'm using embedded html to create a few tiles that each contain a picture and a title. Clicking on the tile should take you to a page on the quarto site. Right now, the adding a title to the containers creates a single blank tile at the end of the list of tiles with the same url as the final tile. Removing the title line fixes this error.

Opening just the html in a browser leaves the titles rendering correctly (without the additional tile). Can anyone explain why this would be happening? TIA!

Including the "title" line does not create an additional blank tile.

---
title: "test"
format: html
editor: visual
---

test test test

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    .tile {
        width: 250px;
        height: 250px;
        border: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        transition: background-color 0.3s, transform 0.3s;
        border-radius: 15px;
    }
    .tile:hover {
        background-color: #e0e0e0;
        transform: scale(1.05);
    }
    .image {
        width: 150px;
        height: 150px;
        margin: auto;
        transition: transform 0.3s;
        filter: invert(41%) sepia(37%) saturate(562%) hue-rotate(163deg) brightness(86%) contrast(86%);
    }
    .title {
        margin-top: auto;
        padding: 10px;
        background-color: #f0f0f0;
        width: 100%;
        border-radius: 0px 0px 15px 15px; /* Rounded edges */
    }
</style>

<div class="container">
  <a href="link1.com" class="tile">
    <img src="images/icons/data-life-cycle.svg" alt="Data Life Cycle" class="image">
    <div class="title">Data Life Cycle</div>
  </a>
  <a href="perspectives/your-role.qmd" class="tile">
      <img src="images/icons/your-role.svg" alt="Your Role" class="image">
      <div class="title">Your Role</div>
  </a>
  <a href="perspectives/data-domain.qmd" class="tile">
      <img src="images/icons/data-domain.svg" alt="Your Domain" class="image">
      <div class="title">Your Domain</div>
  </a>
  <a href="perspectives/your-tasks.qmd" class="tile">
      <img src="images/icons/your-tasks.svg" alt="Your Tasks" class="image">
      <div class="title">Your Tasks</div>
  </a>
  <a href="perspectives/recommended-tools.qmd" class="tile">
      <img src="images/icons/recommended-tools.svg" alt="Recommended Tools" class="image">
      <div class="title">Recommended Tools</div>
  </a>
  <a href="perspectives/national-and-regional-resources.qmd" class="tile"> 
    <img src="images/icons/national-and-regional-resources.svg" alt="National and Regional Resources" class="image">
    <div class="title">National and Regional Resources</div> <!-- Removing these title lines fixes the issue. Why? -->
  </a>
</div>

# More text 

test test

Solution

Place the code in a raw HTML block so that it isn't parsed when rendered.

---
title: "test"
format: html
editor: visual
---

test test test

```{=html}

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    .tile {
        width: 250px;
        height: 250px;
        border: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        transition: background-color 0.3s, transform 0.3s;
        border-radius: 15px;
    }
    .tile:hover {
        background-color: #e0e0e0;
        transform: scale(1.05);
    }
    .image {
        width: 150px;
        height: 150px;
        margin: auto;
        transition: transform 0.3s;
        filter: invert(41%) sepia(37%) saturate(562%) hue-rotate(163deg) brightness(86%) contrast(86%);
    }
    .title {
        margin-top: auto;
        padding: 10px;
        background-color: #f0f0f0;
        width: 100%;
        border-radius: 0px 0px 15px 15px; /* Rounded edges */
    }
</style>

<div class="container">
  <a href="link1.com" class="tile">
    <img src="images/icons/data-life-cycle.svg" alt="Data Life Cycle" class="image">
    <div class="title">Data Life Cycle</div>
  </a>
  <a href="perspectives/your-role.qmd" class="tile">
      <img src="images/icons/your-role.svg" alt="Your Role" class="image">
      <div class="title">Your Role</div>
  </a>
  <a href="perspectives/data-domain.qmd" class="tile">
      <img src="images/icons/data-domain.svg" alt="Your Domain" class="image">
      <div class="title">Your Domain</div>
  </a>
  <a href="perspectives/your-tasks.qmd" class="tile">
      <img src="images/icons/your-tasks.svg" alt="Your Tasks" class="image">
      <div class="title">Your Tasks</div>
  </a>
  <a href="perspectives/recommended-tools.qmd" class="tile">
      <img src="images/icons/recommended-tools.svg" alt="Recommended Tools" class="image">
      <div class="title">Recommended Tools</div>
  </a>
  <a href="perspectives/national-and-regional-resources.qmd" class="tile"> 
    <img src="images/icons/national-and-regional-resources.svg" alt="National and Regional Resources" class="image">
    <div class="title">National and Regional Resources</div> <!-- Removing these title lines fixes the issue. Why? -->
  </a>
</div>

```

# More text 

test test