My search bar width is changing when i click navbar button

Question

In this app when I toggle between home and about page button in the navbar,My search bar's width is changing why??? (For desktop only).

My Code: 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

margin-right: 5%; }

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

So to explain, you are mixing a lot of fixed widths within flex and trying to overstyle to compensate

The .main-nav you have set to flex-end to set it to the right, you just needed to make it larger to contain all of the content of the <li> within it and not force an child element to try to be 150% width of its parent - its trying to break out of the layout. I think its this that is your issue