Div in Div ausrichten

[HM]

Leute ihr kennt das ewige Leiden horizontal ausrichten per CSS!!

Schaut euch bitte beide Screenshots an. Der Code für die Div mit den grünen Rechtecken ist:

.team-left-w3l-agile{
    float: left;
    width: 24%;
    position: relative;
    padding: 10px;
    margin: 30px 0 5px 30px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
    -ms-box-shadow: 0 0 5px rgba(0,0,0,0.3);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 1%;
	background-color:#C7DB00;
	}

Der Code für das Div umrandet in rot ist:

.agile_team_grids {
    margin-top: 3em;
	border: red 1px solid;
}

Habe schon einige Code-Varianten durch aber nichts führte zu dem was ich möchte. Kann mir jemand einen Tip geben bitte?

[Gunnar Bittersmann]

@@HM

    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
    -ms-box-shadow: 0 0 5px rgba(0,0,0,0.3);

Die Eigenschaft ohne Präfix muss grundsätzlich zuletzt stehen, damit die standardisierte Variante womögliche experimentellen Varianten überschreibt.

Hier allerdings: Weg mit allen Browserpräfixen! Seit langem überflüssig. (Nachtrag: -ms-box-shadow hat es nie gegeben.)

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

Auch hier: Weg mit den Browserpräfixen! Seit langem überflüssig. Es sein denn noch -webkit- für Android < 4. Aber wohl eher: Weg mit allen Browserpräfixen!

Habe schon einige Code-Varianten durch aber nichts führte zu dem was ich möchte. Kann mir jemand einen Tip geben bitte?

Fixe Breite der Items? Flexbox ist das, was du möchtest. Beispiel

LLAP 🖖