Я обновил HTML для вашего кода и все работает отлично. Вот обновленный код: Ссылка песочницы
Обновления сделаны - 1. Удален класс container mx-auto
из тела и добавлен как отдельный контейнерный элемент div. 2. Этот новый div будет содержать вашу навигацию и другое содержимое, кроме нижнего колонтитула.
Что происходило ранее - по умолчанию нижний колонтитул выравнивался по левому краю от своего родителя, который был body
, а тело выравнивалось по по центру он отображался так, как будто нижний колонтитул выровнен по правому краю.
Если вы хотите сделать это из существующего кода, вы можете добавить одну строку в css -
footer { left: 0}