/ / Obraz nie działa "responsywnie" używając Flexbox? - html, css, flexbox

Obraz nie działa "responsywnie" przy użyciu Flexbox? - html, css, flexbox

Jestem całkiem nowy w HTML / CSS i zacząłem uczyć się układu CSS flexbox. Po prostu działa na prostym miejscu rekreacji od zera przy użyciu Flexbox.

Na pełnym ekranie położenie obrazu na logowygląda dobrze. Jednak podczas zmiany rozmiaru ekranu mój pasek nawigacji po prawej stronie odpowiada, ale obraz z logo po lewej stronie nie. Uważam jednak, że poprawnie go skonfigurowałem.

.header-container {
display: flex;
width: 100%;
height: 150px;
align-items: center;
justify-content: space-between;
}


.header-container .logo .sb{
display: flex;
justify-content: flex-start;
width: 60%;
position: relative;
left: 50px;
padding: 20px;
}

Oto link do mojej pracy: https://codepen.io/gkunthara/pen/VWdrYj

Co dokładnie robię źle? Wszelkie wskazówki na temat pozycji, jakie wykonuję z flexboxem lub ogólnie z flexboxem, są mile widziane!

Odpowiedzi:

1 dla odpowiedzi № 1

Usuń pozycję na nav i ustaw max-width: 100% na obrazie logo.

https://codepen.io/thesumit67/pen/bRKYLx?editors=1100


2 dla odpowiedzi nr 2

Usuń pozycję

.header-container .nav-bar-container {
display: flex;
/*position: absolute;*/
/*right: 100px;*/
}