CSS -> Selektor :nth-child mi nie działa

Question

Witam, próbuję zaznaczyć parzyste i nieparzyste childy, ale coś mi nie chce działać. Chodzi mi o to, aby tekst pierwszego diva był wyrównany do lewej strony, a drugiego do prawej strony itd. Kiedy zmieniam szerokość w (even) to nic się nie dzieje, ale jak zmieniam szerokość w (odd) to zmienia się szerokość parenta. O co chodzi? Poniżej wstawiam kod

<div class="buy-field">
            Czy chcesz kupić pole pole za cena?
            <div class="field-card">
                <div>Czynsz</div> <div>cena </div>
                <div>Z 1 domem</div> <div>cena  </div>
                <div>Z 2 domami</div> <div>cena </div>
                <div>Z 3 domami</div> <div>cena  </div>
                <div>Z 4 domami</div> <div>cena </div>
                <div>Z hotelem</div> <div>cena </div>
            </div>
        </div>

.buy-field
{
    width: 50%;
    height: 50%;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.field-card
{
    width: 60%;
    height: 85%;
    background-color: lightgreen;
    display: flex;
    flex-wrap: wrap;
}
.field-card:nth-child(even)
{
    width: 50%;
    text-align: right;
}
.field-card:nth-child(odd)
{
    width: 50%;
    text-align: left;
}

 

Answer 1

.buy-field
{
    width: 50%;
    height: 50%;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.field-card
{
    width: 60%;
    height: 85%;
    background-color: lightgreen;
    display: flex;
    flex-wrap: wrap;
}
.field-card div:nth-child(even)
{
    width: 50%;
    text-align: right;
}
.field-card div:nth-child(odd)
{
    width: 50%;
    text-align: left;
}

W .field-card:nth-child(odd) odwołujesz się do rodzica. Musisz użyć .field-card div:nth-child(odd) aby odwołać się do jego potomków.