Center footer for "Edit this page" not horizontally aligned on narrow screens

[ravimakhijapi]

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

When adding "Edit this page" to the website with repo-actions and repo-url in _quarto.yml, the center footer is not horizontally centered when viewing on narrow screens. A screenshot is attached.

A look at the CSS styles in the browser show that a padding-left: 2rem is being added to the relevant <ul> tag. Removing/overriding this padding fixes the alignment.

Steps to reproduce

A minimal _quarto.yml to reproduce the issue.

project:
  type: website

website:
  title: "minimal-site"
  repo-url: "https://github.com/datascijedi/website"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd
  page-navigation: true
  repo-actions: [edit]
  page-footer:
    left: "© 2025 My Name"
    right: "Powered by Quarto"

format:
  html:
    theme:
      - cosmo
      - brand
    css: styles.css
    toc: true

Actual behavior

The footer center "Edit this page" is shifted slightly to the right on narrow screens.

Expected behavior

The footer center "Edit this page" should be horizontally centered including on narrow screens.

Your environment

• IDE: NVim (NVIM v0.11.4, Build type: Release, LuaJIT 2.1.1761727121)
• OS: MacOs Tahoe 26.0.1 (25A362)

Quarto check output

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

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

[✓] Checking LaTeX....................OK
Tex: (not detected)

[✓] Checking Chrome Headless....................OK
Using: Chrome found on system
Path: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
Source: MacOS known location

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

[✓] Checking Python 3 installation....OK
Version: 3.14.0
Path: /opt/homebrew/opt/python@3.14/bin/python3.14
Jupyter: (None)

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

[✓] Checking R installation...........(None)

  Unable to locate an installed version of R.
  Install R from https://cloud.r-project.org/

[mcanouil]

Thanks for the report.

A look at the CSS styles in the browser show that a padding-left: 2rem is being added to the relevant

tag. Removing/overriding this padding fixes the alignment.

That's not the issue as you can see by changing this rule in your browser. There are multiple bootstrap rules here. Which adds left padding and the particular one you mentioned cannot be changed as it would lead to various issues across the whole website.

If you want to change this only on small screen, you can enforce left padding to be 0 in this particular element:

@media (max-width: 767px) {
  .nav-footer .toc-actions ul {
    padding-left: 0;
  }
}

---

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

[ravimakhijapi]

Alright, thanks for the response. I will stick with a CSS fix then.

[ravimakhijapi]

Perhaps rather than change the Bootstrap, it can be added to Quarto default CSS with higher specificity. Or perhaps it could be done programmatically with JS.