/ / Bild reagiert nicht "reaktionsfähig" mit flexbox? - HTML, CSS, Flexbox

Bild reagiert nicht "reaktionsfähig" mit flexbox? - HTML, CSS, Flexbox

Ich bin ziemlich neu in HTML / CSS und habe angefangen, CSS-Flexbox-Layout zu lernen. Arbeiten Sie einfach an einer einfachen Site-Wiederherstellung von Grund auf mit flexbox.

Im Vollbildmodus die Bildpositionierung auf dem Logosieht gut aus. Beim Umblättern der Bildschirmgröße reagiert meine Navigationsleiste auf der rechten Seite, das Logo auf der linken Seite jedoch nicht. Ich glaube aber, dass ich es richtig eingerichtet habe.

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

Hier ist auch ein Link zu meiner Arbeit: https://codepen.io/gkunthara/pen/VWdrYj

Was genau mache ich falsch? Irgendwelche Tipps zur Art der Positionierung, die ich mit der flexbox oder generell mit der flexbox mache, sind willkommen!

Antworten:

1 für die Antwort № 1

Position entfernen auf nav & einstellen max-width: 100% auf dem Logo Bild.

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


2 für die Antwort № 2

Position entfernen

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