CSS position absolute width

[Oliver77]

Hallo, vielleicht kann mir jemand auf die Sprünge helfen.
Ich habe auf der Website https://mg-otterson.de/fileadmin/website15/ ein Widget eingefügt im Kopfbereich. Eine Suche und 2 Textfelder, damit das Layout sich nicht verschiebt, wollte ich den Wrap auf "absolute" setzen. Aber das ist alles gestaucht, obwohl ich eine Breite von 100% eingegeben habe:

.custom-top-bar {
margin-left:40%;
position:absolute;
width:100%;
}

Hat jemand eine Idee, warum es nicht funktioniert?

Danke schon mal für Antworten.

 

[Oliver77]

Update: hab es so eingefügt:
width:calc(100% - 40%);

 

[Oliver77]

Hallo .custom-top-bar kam 2 mal vor, hat sich erledigt!

 

[basti1012]

Du solltest die ganze Seite mit Flexbox aufbauen.
So wie es jetzt ist es für mich Flickschusterei.
Responsiv ist auch relative....
Unter 600 Pixel sieht es komisch aus, was sicherlich nicht so gewollt ist, deine Kontaktverknüpfung ist da wo sie bestimmt nicht sein soll.
Dein such Input Feld hängt zur Hälfte aus der top-bar raus.
Der Footer hängt auf einigen Seiten oben unter der top-bar, da sollte sie auch bei leerem Content da nicht sein.
usw...
Besser wäre alles mit flexbox / Grid zu machen, so ist das nicht wirklich optimal

 

[Oliver77]

Hallo, schau doch mal jetzt drauf, ich habe es mit CSS resonsive gemacht.
Und habe display:flex verwendet.

 

[basti1012]

Sagen wir mal so.
Man sollte, wenn möglich schon komplett Flexbox nutzen, weil Float und Margin Werte mit 30 % und mehr dann so nicht mehr brauch um Elemente an der richtigen stelle zu schieben.
Ist meine Meinung und andere Meinungen gibt es ja zurzeit nicht.

Aber trotzdem,
Du hast alle Fehler behoben die ich in #4 gesagt hatte, ich konnte jetzt auf der schnelle keine optischen Fehler mehr finden.