Unwanted margin in images which makes the spaces between the elements uneven- bootstrap

Question

I have uneven gaps between images because of an unwanted margin

tried checking for margins that may cause it in the CSS. tried adding margin-left:0px

screenshot

    <div class="container-fullwidth justify-content-md-center">
        <nav class="navbar navbar-light secondNav">
            <a class="navbar-brand mx-md-auto" href="#">
                <img src="images/clock1.png" class="secondNavImgs" id="img1Nav2" width="120" height="120" alt=""><img src="images/clock.png" class="secondNavImgs2" id="img1Nav2S" width="120" height="120" alt="">
                <span id="span1Nav2">היסטוריה</span>
            </a>
            <a class="navbar-brand mx-md-auto" href="#">
                <img src="images/rose1.png" class="secondNavImgs" id="img2Nav2" width="120" height="120" alt=""><img src="images/rose.png" class="secondNavImgs2" id="img2Nav2S" width="120" height="120" alt="">
                <span id="span2Nav2">מי אנחנו?</span>
            </a>
            <a class="navbar-brand mx-md-auto" href="#">
                <img src="images/pie-chart1.png" class="secondNavImgs" id="img3Nav2" width="120" height="120" alt=""><img src="images/pie-chart.png" class="secondNavImgs2" id="img3Nav2S" width="120" height="120" alt="">
                <span id="span3Nav2">"בשבילי" במספרים</span>
            </a>
            <a class="navbar-brand mx-md-auto" href="#">
                <img src="images/say1.png" class="secondNavImgs" id="img4Nav2" width="120" height="120" alt=""><img src="images/say.png" class="secondNavImgs2" id="img4Nav2S" width="120" height="120" alt="">
                <span id="span4Nav2">צעירים אומרים...</span>
            </a>
            <a class="navbar-brand mx-md-auto" href="#">
                <img src="images/network1.png" class="secondNavImgs" id="img5Nav2" width="120" height="120" alt=""><img src="images/network.png" class="secondNavImgs2" id="img5Nav2S" width="120" height="120" alt="">
                <span id="span5Nav2">צור קשר</span>
            </a>
        </nav>
    </div>

    .secondNavImgs {
    padding: 10px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    opacity: 1;
    transition: .5s ease;
    display: block;
}

Answer 1

You can force the css changes using margin: 0 !important; on .secondNavImgs

.secondNavImgs {
    margin: 0 !important;
}

Answer 2

apply the css to image tag

img{
    margin: 0 !important;
 }