Trying to format HTML markup inside an SVG ForeignObject element

Question

However I'm having a bit of trouble cleanly formatting a 3x3 css grid.

The idea is to cleanly create my grid as per this example online (but without the gray boxes; rather a filled green background): https://codepen.io/bencounsell/pen/rpBrBK

Here is my sb online project:

https://stackblitz.com/edit/js-1wbqbh?file=style.css

Here's my <foreignobject> element with the HTML markup - where my "MY-WEB-SERVER" should be large in the center of my grid (the numbers are only used as a guide during testing):

/* https://codepen.io/bencounsell/pen/rpBrBK */

.grid {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 15% 70% 15%;
  justify-items: center;
}

.box {
  /* ??? */
}

.label {
  font-family: Arial;
  font-size: 28px;
}

<foreignObject width="90%" height="90%">
  <div class="grid" xmlns="http://www.w3.org/1999/xhtml">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">
      <svg xmlns="http://www.w3.org/2000/svg" fill="goldenrod" height="24" viewBox="0 0 24 24" width="48">
        <path d="M0 0h24v24H0V0z" fill="none" />
        <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
      </svg>
    </div>

    <div class="box">4</div>
    <div class="box label">MY-WEB-SERVER</div>
    <div class="box">6</div>

    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box"><span style="font-family: Arial">RUNNING</span></div>
  </div>
</foreignObject>

As of now, formatting my 3x3 grid looks a bit messy: