Мобильная версияЯ пытаюсь решить проблему из репозитория упражнений CSS Odin Project, а именно 03-flex-header-2.
После рассмотрения предоставленного решения и добавления этих строк кода в мой собственный код мой результат по-прежнему не похож на желаемый. Логотип и ссылки должны находиться полностью в левой части заголовка, а кнопка уведомления и фиолетовый кружок должны быть полностью справа. Я не понимаю, почему мой код не дает того же результата, ведь я просто ввел код решения в свой.
Вот мой собственный код (я только что добавил строки, представленные в их решении):
@import url('https://fonts.googleapis.com/css2?famil ... 00&display =обмен'); тело { маржа: 0; фон: #eee; семейство шрифтов: Besley, serif; } .header { фон: белый; нижняя граница: 1 пиксель сплошной #ddd; box-shadow: 0 0 8px rgba(0, 0, 0, .1); // строки ниже добавлены из кода решения дисплей: гибкий; оправдание-содержание: пространство между; отступ: 8 пикселей; } // строки ниже добавлены из кода решения .левый, .верно { дисплей: гибкий; выровнять-элементы: по центру; разрыв: 16 пикселей; } .изображение профиля { фон: ребеккапурпл; box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .5); радиус границы: 50%; ширина: 48 пикселей; высота: 48 пикселей; } .logo { цвет: ребеккапурпурный; размер шрифта: 32px; вес шрифта: 900; стиль шрифта: курсив; } кнопка { граница: нет; радиус границы: 8 пикселей; фон: ребеккапурпл; белый цвет; отступы: 8 пикселей 24 пикселей; } а { текстовое оформление: нет; цвет: ребеккапурпурный; отступ: 8 пикселей; } ул { тип стиля списка: нет; // строки ниже добавлены из кода решения дисплей: гибкий; маржа: 0; заполнение: 0; разрыв: 16 пикселей; Гибкий заголовок 2 [*] ЛОГОТИП 1 новое уведомление
А вот как это выглядит в моем браузере:
Заранее благодарим вас за любую помощь.
