Почему сайт ломается при открытии index.html, но когда ты открываешь сайт через live server в vs code всё нормально?

У Вас в той же папке, что и index.html, есть вложенные папки css и js? В них лежат файлы стилей и скрипты?

Возможно ли в pug написать контрукцию, чтобы на выходе получилось такое?

Алекс Глебов, Ну это первое, что я попробовал)
На выходе получается f:link.page.text-center - а значит, будет class="page text-center"... , а это совсем не то, что требуется.