Когда я нажимаю кнопку панели навигации, ширина панели поиска меняется

Question

В этом приложении, когда я переключаюсь между кнопкой «Домой» и «О странице» на панели навигации, ширина моей панели поиска меняется, почему ??? (Только для настольных компьютеров).

Мой код: https://github.com/StrikerOne65/snewz

Answer 1

.main-nav {
    display: flex;
    margin-right: 30px;
    justify-content: flex-end;
    width: 75%; -- ADD THIS TO DETERMINE OVER ALL WIDTH OF THE NAV
}

.main-nav li:first-of-type{
    /* padding-right: 25%; */ -- REMOVE THIS
    width: 50%; -- ADJUST THIS FOR YOUR WIDTH OF SEARCH BAR: WHATEVER PERCENT OF .MAIN-NAV

маржа справа: 5%; }

.search {
    display: flex;
    /* width: 150%; */ -- REMOVE THE 150% WIDTH
}

Итак, чтобы объяснить, вы смешиваете много фиксированной ширины внутри flex и пытаетесь переопределить, чтобы компенсировать

.main-nav, который вы установили для flex-end, чтобы установить это вправо, вам просто нужно было увеличить его, чтобы он содержал все содержимое <li> внутри него и не заставлял дочерний элемент пытаться быть на 150% ширины его родителя - его попытка вырваться из макета , Я думаю, что это ваша проблема