overflowing bootstrap grid on mobile website (custom theme)

I have:

• searched the issue tracker for similar issues
• installed the latest version of Quarto CLI
• formatted my issue following the Bug Reports guide

Bug description

I have a problem with an overflowing bootstrap Grid on mobile on my website.

I have a two column layout on desktop, and a one column layout on mobile, automatically adjusted with the quarto included bootstrap grid. For some releases now (cant pinpoint exactly which), on mobile the one column is overflowing to the side of the screen.

I am using a custom theme, and i think i narrowed it down to the scss-option $font-size-root: 20px;, that interferes with this process. Comment it out in the css to see the effect on a mobile view.

Steps to reproduce

---
format: 
  html:
    theme: [custom.scss]
    grid:
      body-width: 800px	
---


Before

::: {.grid}

::: {.g-col-12 .g-col-sm-6 .title-block}

AAAA AAAAA AAAA AAAA AAAAA AAAAA 

:::

::: {.g-col-sm-6 .g-col-12 .title-block}

AAAA AAAAA AAAA AAAA AAAAA AAAAA 

:::

:::

After 

and the corresponding custom css:

/*-- scss:defaults --*/

// Comment this out to have the columns well aligned on mobile
$font-size-root: 20px;

.title-block {
  background-color: grey
}

Actual behavior

This is how it looks on my desktop. The columns are well aligned and in the middle of the screen, no overflow

but this happens as soon as i switch to mobile view (using my desktop browser tools, but happens also on real phones)

Expected behavior

Expected behavior would be that the column and its contents are well aligned in the middle of the screen.

Your environment

• OS: MacOS (newest version)
• running the code in terminal using quarto preview

Quarto check output

Quarto 1.7.24
[✓] Checking environment information...
      Quarto cache location: /Users/ANON/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.85.1: OK
      Deno version 1.46.3: OK
      Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.7.24
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2024.10
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/ANON/Library/TinyTeX/bin/universal-darwin
      Version: 2024

[✓] Checking Chrome Headless....................OK
      Chrome:  (not detected)

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.7
      Path: /Library/Frameworks/Python.framework/Versions/3.12/bin/python3
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
      Version: 4.4.1
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Library/Frameworks/R.framework/Versions/4.4-x86_64/Resources/library
      knitr: 1.48
      rmarkdown: 2.28

[✓] Checking Knitr engine render......OK

Start with the supplied QMD reproduction and custom.scss, run it with Quarto 1.7.24, and compare the mobile grid with and without $font-size-root: 20px. Inspect the generated mobile layout and Bootstrap grid behavior; done means the one-column layout remains centered without horizontal overflow while the custom font size is retained.