problem z wypozycjonowaniem znacznika figure za pomocą flex-boxa

Witam wszystkich. Próbuję zmienić wyświetlanie na stronie zdjęć które zamieściłem w znacznikach <figure>. Na nadrzędnym kontenerze ustawiłem display: flex, flex-wrap:wrap a znacznikom figure i zdjęciom w nich zawartym width: 50%. Pomimo tego zdjęcia wyświetlają się nadal jedne pod drugim a nie obok siebie. Podejrzewam że problem jest w samym znaczniku bo bez niego wszystko działa.Proszę o pomoc.

<div class="figure-container">
                <figure>
                    <img src="img/mallorca.jpg" alt="river">
                </figure>
                <figure>
                    <img src="img/road.jpg" alt="river">
                </figure>
                <figure>
                    <img src="img/landscape.jpg" alt="river">
                </figure>
                <figure>
                    <img src="img/mallorca.jpg" alt="river">
                </figure>
            </div>
CSS:
  .figure-container {
        display: flex;
        flex-wrap: wrap;
    }

    .figure {
        width: 50%;
    }

    .figure-container img {
        width: 50%;
    }

Przekleiłem kod do pliku HTML i wszystko jest git, więc to raczej coś związanego z innymi stylami (albo nie rozumiem problemu). Może domyślne style przeglądarki narzucają jakiś margines lub padding?

Sprawdzałem w kilku przeglądarkach. Nawet używając tylko powyższego kodu zdjęcia wyświetlają się u mnie jedne pod drugim a chciałbym żeby wyświetlały się po dwa zdjęcia obok siebie w dwóch rzędach. Pojedynczy znacznik figure zajmuje u mnie 100% szerokości i pomimo przypisania mu width: 50% nie zmienia się jego szerokość.

Dzięki za pomoc temat udało mi się ogarnąć. Musiałem usunąć domyślny padding i margin znacznika figure.