/ Obrázok nie je "reagujúci" pomocou flexboxu? - html, css, flexbox

Obrázok nie je "reagujúci" pomocou flexboxu? - html, css, flexbox

Som dosť nový pre HTML / CSS a začal som sa snažiť naučiť CSS flexbox layout. Práca pracuje na jednoduchej stránke rekreácie od začiatku pomocou flexboxu.

Na celej obrazovke sa umiestni obrázok na logovyzerá dobre. Pri posúvaní okolo veľkosti obrazovky však môj navigačný panel na pravej strane odpovedá, ale obrázok na ľavej strane nie je. Verím, že som to správne nastavil.

.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;
}

Tu je aj odkaz na moju prácu: https://codepen.io/gkunthara/pen/VWdrYj

Čo presne robím zle? Akékoľvek tipy na typ polohovania, ktoré robím s flexboxom alebo flexboxom, sú všeobecne oceňované!

odpovede:

1 pre odpoveď č. 1

Odstráňte pozíciu nav & nastaviť max-width: 100% na obrázku loga.

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


2 pre odpoveď č. 2

Odstrániť pozíciu

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