Hallo Sturmverliebt
bei CSS-Angaben musst du auch auf die Reihenfolge der Eingabe achten. Spätere Angaben sollen vorherige überschreiben.
Wenn du schreibst
figure:nth-child(3n){
position: relative;
width: 310px;
height: 200px;
float:left;
margin:0 0px 20px 0
}
figure {
position: relative;
width: 310px;
height: 200px;
float:left;
margin:0 7px 20px 0
}
werden die Angaben vom "figure:nth-child(3n)" durch das "figure" überschrieben. (Bei den margin fehlen auch die abschließenden Semikolon)
Deshalb solltest du die beiden tauschen. Der Übersichtlichkeit und späteren Pflege wegen solltest du beim nth-child auch nur die Änderungen eintragen. Also
figure {
position: relative;
width: 310px;
height: 200px;
float:left;
margin:0 7px 20px 0;
}
figure:nth-child(3n){
margin-right: 0;
}
margin-right, weil du bei "margin:0 0 20px 0;" immer erst den Ursprungszustand suchen und vergleichen müssest, welche Änderungen überhaupt erreicht werden sollen. In längeren CSS-Dateien stehen die Angaben nicht immer direkt übereinander.
Gruss
MrMurphy