Почему мой веб-сайт отличается от моего html-файла [закрыто] ⇐ CSS

[Anonymous]

В настоящее время я создал свой первый веб-сайт и разместил его на GitHub. В одном из файлов с моего компьютера он работает нормально, но когда я опубликовал его на страницах GitHub, пространство на моем изображении, панели навигации и моих полях сместилось с того места, где я их изначально разместил. Например, все они (заголовок, текст, изображение и поля) перекрываются, интервал исчез, а текст переместился слишком далеко вверх. Это привело к тому, что страница опустилась ниже и привело к появлению белого пустого пространства, которого изначально не было. Он также удалил одну из моих кнопок на панели навигации

Это есть в разделе обо мне:

Вот как это выглядит сейчас: Как это выглядит на страницах GitHub

Вот как это должно выглядеть. Как это выглядит в html-файле Если кто-нибудь знает, как это исправить, дайте мне знать.

Я попробовал настроить размер вручную, но это не помогло/отнимает слишком много времени. Я также попытался проверить, не связан ли CSS, и использовал инструменты администратора, чтобы выяснить, смогу ли я найти проблему.

Вот исходный код aboutMe.css:

.navbar{ ширина: 85%; маржа: авто; отступ: 35 пикселей 0; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: равномерно по пространству; } .backgroundpage{ ширина: 100%; высота: 100vh; фоновое изображение: линейный градиент (rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url(planet.jpg); размер фона: обложка; фоновая позиция: центр; оправдание-содержание: равномерно по пространству; } .navbar уль ли{ стиль списка: нет; отображение: встроенный блок; поле: 0 20 пикселей; положение: относительное; } .navbar уль ли а{ текстовое оформление: нет; белый цвет; преобразование текста: верхний регистр; } .navbar ul li ::after{ содержание: ''; высота: 3 пикселя; ширина: 0; фон: #009688 ; позиция: абсолютная; слева: 0; внизу: -10 пикселей; переход: 0,5 с; } .navbar ul li :hover:after{ ширина: 100%; } .smth { дисплей: гибкий; гибкое направление: строка; /* Располагаем элементы .box горизонтально */ } .текст-контент{ ширина: 110%; позиция: абсолютная; Топ 10%; низ: 30%; белый цвет; } .text-content p{ выравнивание текста: по центру; поле: 20 пикселей авто; слева: 100%; размер шрифта: 20 пикселей; вес шрифта: 100; высота строки: 25 пикселей; низ: 50%; } ул.а { позиция в стиле списка: снаружи; оправдание-содержание: равномерно по пространству; поле: 20 пикселей авто; вес шрифта: 100; высота строки: 35 пикселей; } .content h1{ выравнивание текста: по центру; } ул.б { позиция в стиле списка: снаружи; оправдание-содержание: равномерно по пространству; поле: 25 пикселей авто; вес шрифта: 100; высота строки: 27 пикселей; } .коробка { ширина: 400 пикселей; /* Отрегулируйте ширину в зависимости от вашего макета */ высота: 400 пикселей; /* Отрегулируйте высоту в зависимости от вашего макета */ фон: #E1DADA; поле: 10 пикселей; /* Добавляем пробел между элементами .box */ граница: 3 пикселя, сплошная белая; граница-радиус: 1; позиция: абсолютная; верх:30%; слева: 10%; } .boxv2 { ширина: 400 пикселей; /* Отрегулируйте ширину в зависимости от вашего макета */ высота: 400 пикселей; /* Отрегулируйте высоту в зависимости от вашего макета */ фон: #E1DADA; поле: 10 пикселей; /* Добавляем пробел между элементами .box */ граница: 3 пикселя, сплошная белая; граница-радиус: 1; позиция: абсолютная; верх:30%; осталось: 40%; } .boxv3 { ширина: 400 пикселей; /* Отрегулируйте ширину в зависимости от вашего макета */ высота: 400 пикселей; /* Отрегулируйте высоту в зависимости от вашего макета */ фон: #E1DADA; поле: 10 пикселей; /* Добавляем пробел между элементами .box */ граница: 3 пикселя, сплошная белая; граница-радиус: 1; позиция: абсолютная; верх:30%; осталось: 70%; } тело, HTML { маржа: 0; заполнение: 0; семейство шрифтов: без засечек; } HTML, тело { переполнение-х: скрыто; } Основные проблемы, которые я вижу, заключаются в том, что 1: поля, текст и изображения потеряли свое фиксированное положение. 2: панель навигации была перемещена вверх и потерялась одна из кнопок.